angular-progress-button-styles

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="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<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!

Configuration

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 | |---|---|---------| | pb-style | fillshrinkrotate-angle-bottomrotate-angle-toprotate-angle-leftrotate-angle-rightrotate-side-downrotate-side-uprotate-side-leftrotate-side-rightrotate-backslide-downtop-linemove-uplateral-linesflip-open | Defines button appearance. Default value is fill. | | pb-direction | horizontalvertical | To be used with pb-style=(fill or shrink). Defines the direction of the progress bar. Default value is horizontal. | | pb-random-progress | truefalse | 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:

progressButtonConfigProvider.profile({
  style: 'shrink',
  direction: 'vertical'
});

License

MIT license.

Contribution

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

Special thanks for contribution:

• danielgranat
• Toby Summerfield