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:
``bash
bower install --save angular-progress-button-styles
`
Include scripts and styles (I use FontAwesome for success and error icons, but you can override it):
`html



`
Add angular module dependency:
`javascript
var app = angular.module('app', ['angular-progress-button-styles']);
`
Add directive to the button element!
`html
Submit
`

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:
`javascript
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:
`html
Submit
`
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:
`javascript
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