1.0.4 • Public • Published

    Angular $http Progress Bar

    YouTube like top attached progress bar to show $http requests in progress (automatic)

    bower npm downloads preview

    How does it work?

    When you include module to your app's dependencies, you will automatically get progress bar whenever you send ajax requests through $http service.

    You can change the background color and other options in config block using $httpProgressOpsProvider provider of ng-http-progress module.

    In general, whenever your app send one or more $http requests, progress bar will show up and progress will start. At each second, progress bar width will increment by 5% until it reaches 90%. At 90% progress, progress bar will pause and stay like that until all ajax requests finishes. When all ajax requests finishes, progress bar will reach 100% progress and disappear. If all ajax requests finishes before progress reaches 90%, it will jump to 100% and disappear. You can change pause value of 90% to any number between 0 - 100 in config phase.

    It consumes only 2kb (gzipped) and it's very hackable.



    bower install ng-http-progress


    npm install ng-http-progress

    include ng-http-progress.js and ng-http-progress.css from dist directory.

    Config / Options

    .module('demo', [''])
            background: '#b91f1f',
            autoPauseAt : 90,
            http : true

    all above values are default values, you can avoid any options or entire config block if you want.

    option value role
    background hex/rgba background color of progress bar
    startAt 0 - 100 start progress bar with initial progress
    autoPauseAt 0 - 100 where progress bar will pause until requests resolve
    http true/false automatic show/hide progress bar for $http requests


    If you wish to show progress bar other than just $http requests, then you can use events to show/hide/pause/resume progress bar. Ex. $rootScope.$emit('$httpProgressStart');

    event name emit from role
    $httpProgressStart $rootScope show/start progress bar
    $httpProgressPause $rootScope pause progress bar
    $httpProgressResume $rootScope resume progress bar
    $httpProgressRestart $rootScope restart progress bar
    $httpProgressStop $rootScope stop/hide progress bar

    Build on your own

    You can build this directive with your own customization using gulp.

    1. Go to repository's parent directory and install all node dev dependencies using npm install --dev.
    2. Make sure you have gulp install globally. Else use npm install -g gulp to install gulp globally.
    3. All css for this repository has been generated using sass (.scss), so you need to spend 5 mins to learn basics of sass.
    4. To build or watch the changes, use command gulp build or gulp watch

    Contributions and Bug reports

    1. Please create an issue if you need some help or report a bug.
    2. Take a pull request to add more features or fix the bugs. Please mention your changes in the PR.
    3. Please make sure you recommend good practices if you came/come across any or if something could have been better in this module.




    npm i ng-http-progress

    DownloadsWeekly Downloads






    Last publish


    • thatisuday