Node's Package Magician


    0.1.0 • Public • Published


    AngularJS version of Codrops progress buttons. I've also made less and sass versions of it besides css.

    Check out Live demo!

    Basic usage

    Install bower package:

    bower install --save angular-progress-button-styles

    Include scripts and styles (I use FontAwesome for success and error icons, but you can override it):

    <link rel="stylesheet" href="">
    <link rel="stylesheet" type="text/css" href="bower_components/angular-progress-button-styles/dist/angular-progress-button-styles.min.css">
    <script type="text/javascript" src="bower_components/angular-progress-button-styles/dist/angular-progress-button-styles.min.js"></script>

    Add angular module dependency:

    var app = angular.module('app', ['angular-progress-button-styles']);

    Add directive to the button element!

    <button progress-button="someFunctionThatReturnsPromise()">Submit</button>

    That's it! Enjoy the plugin!


    The directive itself takes as a parameter callback function, that returns promise after execution. If function returns value progress completes instantly. You can configure plugin using two different ways:

    • Using html attributes
    • Using javascript
    HTML configuration

    Here is a list of supported HTML attributes and their meaning:

    Attribute Available values Meaning
    • fill
    • shrink
    • rotate-angle-bottom
    • rotate-angle-top
    • rotate-angle-left
    • rotate-angle-right
    • rotate-side-down
    • rotate-side-up
    • rotate-side-left
    • rotate-side-right
    • rotate-back
    • slide-down
    • top-line
    • move-up
    • lateral-lines
    • flip-open
    Defines button appearance. Default value is fill.
    • horizontal
    • vertical
    To be used with pb-style=(fill or shrink). Defines the direction of the progress bar.
    Default value is horizontal.
    • true
    • false
    Runs random fill function from the moment button is clicked till promise is resolved.
    Default value is true.
    pb-profile String value The profile from which to fetch configuration during the button initialization.
    For more information look JS configuration section
    Javascript configuration

    For those ones, who don't like to have a lot of configuration in HTML as well to prevent the copy-paste there also is possibility to define configuration in Javascript using profiles. To do this, you need to inject progressButtonConfigProvider during the app configuration:

    mdl.config(function(progressButtonConfigProvider) {
      progressButtonConfigProvider.profile('testProfile', {
        style: 'shrink',
        direction: 'vertical'

    In this example new profile called 'testProfile' created. You can then apply it to you button like this:

    <button progress-button="someFunctionThatReturnsPromise()" pb-profile="testProfile">Submit</button>

    This would create new button with style shrink and vertical direction.

    You can as well define default profile, that will be applied to all the buttons across your application:

      style: 'shrink',
      direction: 'vertical'


    MIT license.


    You are welcome to contribute. Feel free to contact me.

    Special thanks for contribution:


    npm i angular-progress-button-styles

    DownloadsWeekly Downloads






    Last publish


    • akveo