AngularJS version of codrops progress buttons for the use with promises
CSS JavaScript
Latest commit a71f678 Mar 30, 2016 @smartapant smartapant Update README.md

README.md

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: