Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/themyth92/ngspin
Ajax loader for AngularJS (Spinkit)
https://github.com/themyth92/ngspin
Last synced: 18 days ago
JSON representation
Ajax loader for AngularJS (Spinkit)
- Host: GitHub
- URL: https://github.com/themyth92/ngspin
- Owner: themyth92
- License: mit
- Created: 2015-06-12T09:57:07.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2015-08-29T08:21:59.000Z (about 9 years ago)
- Last Synced: 2024-04-15T09:09:11.340Z (7 months ago)
- Language: CSS
- Homepage: http://themyth92.com/project/ngSpin/example/index.html
- Size: 207 KB
- Stars: 2
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# ngSpin
## Introduction
This angular module constructs a set of directives for a collection of Ajax Loading Indicator. This project is currently using [SpinKit](http://tobiasahlin.com/spinkit/) by [@tobiashlin](https://github.com/tobiasahlin)
## Demo
[Demo](http://themyth92.com/project/ngSpin/example/index.html)
## Setup
1. Denpendancy
* [Spinkit](https://github.com/tobiasahlin/SpinKit)
* [AngularJS](https://angularjs.org/)
2. Installation
[Download and extract](https://github.com/themyth92/ngSpin/archive/master.zip)
3. Include stylesheet
```html
```
4. Include scripts
```html
```
5. Add `ngSpin` module dependancy
```javascript
angular.module('yourModule', ['ngSpin']);
```
## Configuration
### Directive list
```html
```
### Optional attributes
1. Spinkit rotating plane
Attributes | Type | Default | Description
-----------|----------|---------|------------
spin-width | Number | **30** px | Rectangular width
spin-height | Number | **30** px | Rectangular height
spin-speed | Number | **1.2** s | Spinning speed of the rectangular. Lower is faster
spin-color | Hex String | # **333** | Rectangular color
2. Spinkit double bounce
Attributes | Type | Default | Description
-----------|----------|---------|------------
spin-radius | Number | **20** px | Longest circle radius
spin-speed | Number | **2** s | Duration of a circle from smallest to biggest size. Lower is faster
spin-color | Hex String | # **333** | Circle lightest color
3. Spinkit wave
Attributes | Type | Default | Description
-----------|----------|---------|------------
spin-width | Number | **5** px | Each column width
spin-height | Number | **50** px | Each column height
spin-margin | Number | **3** px | Gap between each columns
spin-color | Hex String | # **333** | Column color
4. Spinkit wandering cube
Attributes | Type | Default | Description
-----------|----------|---------|------------
spin-width | Number | **10** px | Each cube width
spin-height | Number | **10** px | Each cube height
spin-color | Hex String | # **333** | Cube color
5. Spinkit pulse
Attributes | Type | Default | Description
-----------|----------|---------|------------
spin-radius | Number | **20** px | Biggest circle radius
spin-speed | Number | **1** s | Duration of the circle from its smallest to biggest size. Lower is faster
spin-color | Hex String | # **333** | Circle lightest color
6. Spinkit chasing dot
Attributes | Type | Default | Description
-----------|----------|---------|------------
spin-radius | Number | **20** px | Radius of the circle that 2 circles spinning arround
spin-speed | Number | **2** s | Circle spin speed. Lower is faster
spin-color | Hex String | # **333** | Each circle color
7. Spinkit three bounce
Attributes | Type | Default | Description
-----------|----------|---------|------------
spin-bound-width | Number | **70** px | Width of bounding box around the circle
spin-radius | Number | **9** px | Radius of each circle
spin-speed | Number | **1.4** s | Duration of each circle between its biggest and smallest size
spin-color | Hex String | # **333** | Each circle color
8. Spinkit circle
Attributes | Type | Default | Description
-----------|----------|---------|------------
spin-bound-radius | Number | **11** px | Bounding box radius
spin-color | Hex String | # **333** | Each circle color. **NOTICE : this value should be changed using CSS style**
9. Spinkit cube grid
Attributes | Type | Default | Description
-----------|----------|---------|------------
spin-width | Number | **30** px | Bounding box width
spin-height | Number | **30** px | Bound box height
spin-color | Hex String | # **333** | Cube color
10. Spinkit fade circle
Attributes | Type | Default | Description
-----------|----------|---------|------------
spin-radius | Number | **11** px | Bounding circle radius
spin-color | Hex String | # **333** | Circle color. **NOTICE : this value should be changed using CSS style**
11. Spinkit folding cube
Attributes | Type | Default | Description
-----------|----------|---------|------------
spin-color | Hex String | # **333** | Cube color. **NOTICE : this value should be changed using CSS style**
### Example usage
```html
```
## License
MIT
## Projects planned to use with this module
* [Connoratherton CSS Loader](https://connoratherton.com/loaders)
* [Spinkit CSS Loader](http://tobiasahlin.com/spinkit/)
* [Sam Herbert SVG Loader](http://samherbert.net/svg-loaders/)
## Notice
This project is currently in progress ...