Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/urish/angular-spinner
Angular directive to show an animated spinner (using spin.js)
https://github.com/urish/angular-spinner
Last synced: 3 months ago
JSON representation
Angular directive to show an animated spinner (using spin.js)
- Host: GitHub
- URL: https://github.com/urish/angular-spinner
- Owner: urish
- License: mit
- Archived: true
- Created: 2013-06-11T23:51:44.000Z (over 11 years ago)
- Default Branch: master
- Last Pushed: 2018-05-06T14:46:53.000Z (over 6 years ago)
- Last Synced: 2024-07-25T12:11:38.402Z (3 months ago)
- Language: TypeScript
- Size: 112 KB
- Stars: 694
- Watchers: 21
- Forks: 145
- Open Issues: 10
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# angular-spinner
Angular directive to show an animated spinner (using [spin.js](http://fgnass.github.io/spin.js/))
Copyright (C) 2013, 2014, 2015, 2016, 2017 Uri Shaked, Islam Attrash and contributors
[](https://travis-ci.org/urish/angular-spinner)
[](https://coveralls.io/r/urish/angular-spinner)
## Usage
Get angular-spinner
- via npm: by running ``` $ npm install angular-spinner ``` from your console
- via bower: by running ``` $ bower install angular-spinner ``` from your console
Include angular-spinner.js in your application.
```js
import 'angular-spinner';
OR:
require('angular-spinner');
```
OR by picking one of the following file (depends on the package manager):
```html
```
Add the module `angularSpinner` as a dependency to your app module:
```js
var myapp = angular.module('myapp', ['angularSpinner']);
```
You can now start using the us-spinner directive to display an animated
spinner. For example :
```html
```
You can also pass spinner options, for example:
```html
```
Possible configuration options are described in the [spin.js homepage](http://fgnass.github.io/spin.js/).
You can direct the spinner to start and stop based on a scope expression, for example:
```html
```
### Configuring default spinner options
You can use `usSpinnerConfigProvider` to configure default options for all spinners globally. Any options passed from a directive still override these.
```js
myapp.config(['usSpinnerConfigProvider', function (usSpinnerConfigProvider) {
usSpinnerConfigProvider.setDefaults({color: 'blue'});
}]);
```
## Themes
Themes provide named default options for spinners. Any options passed from a directive still override these.
```js
myapp.config(['usSpinnerConfigProvider', function (usSpinnerConfigProvider) {
usSpinnerConfigProvider.setTheme('bigBlue', {color: 'blue', radius: 20});
usSpinnerConfigProvider.setTheme('smallRed', {color: 'red', radius: 6});
}]);
```
```html
```
### Using the usSpinnerService to control spinners
```html
Start spinner
Stop spinner
```
The `usSpinnerService` service let you control spin start and stop by key.
Whenever the key is not specified all the spinner will be affected (Start/Stop all spinners):
```js
app.controller('MyController', ['$scope', 'usSpinnerService', function($scope, usSpinnerService){
$scope.startSpin = function(){
usSpinnerService.spin('spinner-1');
}
$scope.stopSpin = function(){
usSpinnerService.stop('spinner-1');
}
}]);
```
Note that when you specify a key, the spinner is rendered inactive.
You can still render the spinner as active with the spinner-start-active parameter :
```html
```
spinner-start-active is ignored if spinner-on is specified.
The spinner-key will be used as an identifier (not unique) allowing you to have several spinners controlled by the same key :
```html
... random html code ...
```
### Example
See [online example on Plunker](http://plnkr.co/edit/OUJTJbtG2F0VUvnIk1dv?p=preview).
## License
Released under the terms of MIT License.
## Contributing
1. Fork repo.
2. `npm i`
3. Make your changes, add your tests.
4. `npm run test`
5. `npm run build` once all tests are passing. Commit, push, PR.