ng-bs-animated-button
Angular/Bootstrap animated submit button directive

View on GitHub View Plunker

Demos

Demo 1: Default options | success
Demo 2: Default options | error
Demo 3: Icons on right 

$scope.options = {
  iconsPosition: 'right'
};
Demo 4: Different colours for each state 

$scope.options = {
  buttonDefaultClass: 'btn-default',
  buttonSubmittingClass: 'btn-info',
  buttonSuccessClass: 'btn-success'
};
Demo 5: Custom text for each state 

$scope.options = {
  buttonDefaultText: 'Lorem ipsum',
  buttonSubmittingText: 'Dolor sit amet',
  buttonSuccessText: 'Consectetur elit'
};
Demo 6: Using Font Awesome icons 

$scope.options = {
  buttonSubmittingIcon: 'fa fa-spinner',
  buttonSuccessIcon: 'fa fa-smile-o'
};
Demo 7: Custom animation complete hold timing 

$scope.options = {
  animationCompleteTime: '5000'
};
Demo 8: Button size 

$scope.options = {
  buttonSizeClass: 'btn-lg'
};
Demo 9: Only icons 

$scope.options = {
  onlyIcons: true
};
Demo 10: Only icons | custom icons 

$scope.options = {
  onlyIcons: true,
  buttonInitialIcon: 'fa fa-send',
  buttonSubmittingIcon: 'fa fa-circle-o-notch',
  buttonSuccessIcon: 'fa fa-thumbs-up'
};

Install

bower install ng-bs-animated-button

Usage

Add as a module dependency to your app:

angular.module('yourApp', ['jp.ng-bs-animated-button']);

Add the directive to your template:

<jp-ng-bs-animated-button is-submitting="isSubmitting" result="result" options="options"></jp-ng-bs-animated-button>

Add the required scope variables and any options to your controller:

app.controller('yourCtrl', function($scope) {

  // Required - set to true on submission
  $scope.isSubmitting = null;

  // Required - set to 'success' or 'error' on success/failure
  $scope.result = null;

  // Optional
  $scope.options = {
    buttonDefaultText: 'Lorem ipsum',
    ...
  };

});

Options

Option Default
buttonDefaultClass 'btn-primary'
buttonSubmittingClass 'btn-primary'
buttonSuccessClass 'btn-primary'
buttonErrorClass 'btn-danger'
buttonSizeClass null
buttonDefaultText 'Submit'
buttonSubmittingText 'Submitting...'
buttonSuccessText 'Completed'
buttonErrorText 'There was an error'
buttonInitialIcon 'glyphicon glyphicon-plus'
buttonSubmittingIcon 'glyphicon glyphicon-refresh'
buttonSuccessIcon 'glyphicon glyphicon-ok'
buttonErrorIcon 'glyphicon glyphicon-remove'
formIsInvalid ''
animationCompleteTime '2000'
iconsPosition 'left'
onlyIcons false