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	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.
pb-direction	horizontal vertical	To be used with pb-style=(fill or shrink). Defines the direction of the progress bar. Default value is horizontal.
pb-random-progress	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:

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