angular-button-spinner

Soure code on github

Find the source code below:

https://github.com/jvdvleuten/angular-button-spinner

Description

This is a simple directive (765 bytes when minified) to add a spinner while loading some data for user feedback. It uses font-awesome to render the spinner by default, but you can customize all classes as can be seen below.

Usage

It can be used on every element (e.g. <a>, <button>), as an attribute.

Best results are obtained when used in combination with font-awesome and bootstrap. I recommend using it in combination with ng-disable to prevent firing multiple requests.

Dependencies

  • Font-awesome (for default spinner)

Feedback while loading

<a class="btn btn-success" ng-click="toggleLoading()" button-spinner="loading">Spin me, try me out now!</a>

Spin me, try me out now! Such wow, many spin, much awesome

Look below for more examples

Installation

1. Install

Via bower

bower install angular-button-spinner --save

2. Add module in your AngularJS app

angular.module('MyApp', ['angular-button-spinner']);

In order to use the default icon, or the fa-icons in the examples, please install font-awesome as well.

Attributes

button-spinner="loading" (required)

Base attribute for the directive to work

loading: scope variable that toggles the spinner

spinner-icon="classnames"

Customize the spinning icon

loading: classname(s) seperated with a space (e.g.: "fa fa-spinner fa-spin")

button-append="classnames"

Appends an icon when not spinning

classnames: classname(s) seperated with a space (e.g.: "fa fa-chevron-right")

button-prepend="classnames"

Prepends an icon when not spinning.
Note: When spinning, the spinning icon will be in place of the prepend icon.

classnames: classname(s) seperated with a space (e.g.: "fa fa-save")

Examples

Spinner only

<a class="btn btn-success" ng-click="toggleLoading()" button-spinner="loading">Save</a>
Save

Spinner only + ng-disabled

<a class="btn btn-success" ng-click="toggleLoading()" button-spinner="loading" ng-disabled="loading">Save</a>
Save

Append icon

<a class="btn btn-success" ng-click="toggleLoading()" button-spinner="loading" button-append="fa fa-chevron-right">Next</a>
Next

Prepend icon

<a class="btn btn-success" ng-click="toggleLoading()" button-spinner="loading" button-prepend="fa fa-save">Save</a>
Save

Custom spinner icons

Custom spinner

<a class="btn btn-success" ng-click="toggleLoading()" button-spinner="loading" spinning-icon="fa fa-circle-o-notch fa-spin">Save</a>
Save

Custom spinner with append

<a class="btn btn-success" ng-click="toggleLoading()" button-spinner="loading" spinning-icon="fa fa-home fa-spin" button-append="fa fa-chevron-right">Next</a>
Next

Custom spinner with prepend

<a class="btn btn-success" ng-click="toggleLoading()" button-spinner="loading" spinning-icon="fa fa-save fa-spin" button-prepend="fa fa-save">Save</a>
Save

Example controller

The example controller controls the loading variable in the scope. It resets after 2 seconds.

angular.module('MyApp').controller('MyController', ['$scope','$timeout',
	function ($scope, $timeout) {
		
		$scope.loading = false;
		
		$scope.toggleLoading = function() {
			$scope.loading = true;
			
			$timeout(function() { 
				$scope.loading = false;
			}, 2000);
		};
	
	}
]);