# ng-bs-animated-button

> Angular/Bootstrap animated submit button directive

Latest version **2.0.3** (published 2016-02-21) · MIT license · 0 weekly downloads

## Install

```sh
npm install ng-bs-animated-button
pnpm add ng-bs-animated-button
yarn add ng-bs-animated-button
bun add ng-bs-animated-button
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.0.3 |
| Published | 2016-02-21 |
| First published | 2016-02-21 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 141 |
| Author | Jeremy Peters |
| Maintainers | lookitsatravis |
| Keywords | Angular, AngularJS, Bootstrap, submit, form, button |

## Links

- npm: https://www.npmjs.com/package/ng-bs-animated-button
- Repository: https://github.com/jeremypeters/ng-bs-animated-button
- Homepage: https://github.com/jeremypeters/ng-bs-animated-button#readme
- Issues: https://github.com/jeremypeters/ng-bs-animated-button/issues
- npm.io page: https://npm.io/package/ng-bs-animated-button

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 2.0.3 (latest) — 2016-02-21

## README

#ng-bs-animated-button

Angular/Bootstrap animated submit button directive.

## Demo

http://jeremypeters.github.io/ng-bs-animated-button/

## Usage
1. Install via Bower:
 
  ```console
  bower install ng-bs-animated-button
  ```

2. Include `ng-bs-animated-button.js` and `ng-bs-animated-button.css` in your app. They should be located at `bower_components/ng-bs-animated-button/`.

3. Add `jp.ng-bs-animated-button` as a module dependency to your app:

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

4. Add the directive with the required attributes to your template:

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

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

  ```JavaScript
  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'                  |
| `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                         |

---
_Source: https://npm.io/package/ng-bs-animated-button · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._