AngularJS version of Codrops progress buttons. I've also made less and sass versions of it besides css.
Check out Live demo!
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):
Add angular module dependency:
var app = angular;
Add directive to the button element!
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
Here is a list of supported HTML attributes and their meaning:
||Defines button appearance. Default value is fill.|
||To be used with pb-style=(fill or shrink). Defines the direction of the progress bar.
Default value is horizontal.
||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
To do this, you need to inject
progressButtonConfigProvider during the app configuration:
In this example new profile called 'testProfile' created. You can then apply it to you button like this:
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:
progressButtonConfigProviderprofilestyle: 'shrink'direction: 'vertical';
You are welcome to contribute. Feel free to contact me.
Special thanks for contribution: