https://github.com/tiste/angular-loading-button
Loading button directive for AngularJS
https://github.com/tiste/angular-loading-button
angular gh-pages package
Last synced: 5 months ago
JSON representation
Loading button directive for AngularJS
- Host: GitHub
- URL: https://github.com/tiste/angular-loading-button
- Owner: tiste
- Created: 2014-08-07T20:38:49.000Z (over 11 years ago)
- Default Branch: master
- Last Pushed: 2016-08-30T08:30:54.000Z (over 9 years ago)
- Last Synced: 2025-10-22T14:00:02.031Z (5 months ago)
- Topics: angular, gh-pages, package
- Language: CSS
- Homepage: https://angular-loading-button.tiste.io
- Size: 30.3 KB
- Stars: 26
- Watchers: 3
- Forks: 10
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# angular-loading-button
Loading button directive for AngularJS.
## Installation
`bower install angular-loading-button --save`
## Usage
Inject module into you app:
```javascript
angular.module('YourAwesomeApp', ['loadingButton']);
```
Use it at a [directive](http://docs.angularjs.org/guide/directive):
```html
```
You can also provide a `lb-value` tag to act on your button (e.g. `height`, `background`...).
Then, simply set the `$scope.isSuccess` to `true` or `false`, or change the `lb-value` to update the loader e.g.
```javascript
$http.post('/contact', data).success(
function() {
$scope.isSuccess = true;
}
).error(
function() {
$scope.isSuccess = false;
}
);
```
The css classes life-cycle will be `loading`, `error` and `success`. It's up to you to customize ([here is](http://angular-loading-button.tiste.io) an example coming from [this](http://tympanus.net/Tutorials/CircularProgressButton/) awesome Codrops article).
## Contributing
1. [Fork it](http://github.com/tiste/angular-loading-button/fork)
2. Create your feature branch (`git checkout -b my-new-feature`)
3. Commit your changes (`git commit -am 'Add some feature'`)
4. Push to the branch (`git push origin my-new-feature`)
5. Create new Pull Request
**NB**: mind generated files (e.g. `angular-loading-button.min.js`)