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