This angular module constructs a set of directives for a collection of Ajax Loading Indicator. This project is currently using SpinKit by @tobiashlin
- Denpendancy
- Installation
- Include stylesheet
<link rel = 'stylesheet' href = 'build/spinkit.min.css'>- Include scripts
<script type = 'text/javascript' src = 'https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.4/angular.js'></script>
<script type = 'text/javascript' src = 'build/ngSpin.min.js'></script>- Add
ngSpinmodule dependancy
angular.module('yourModule', ['ngSpin']); <!-- spinkit rotating plane-->
<sk-rot-plane></sk-rot-plane>
<!-- spinkit double bouncing -->
<sk-d-bounce</sk-d-bounce>
<!-- spinkit wave -->
<sk-wave></sk-wave>
<!-- spinkit wandering cube -->
<sk-wand-cube></sk-wand-cube>
<!-- spinkit pulse -->
<sk-pulse></sk-pulse>
<!-- spinkit chasing dot -->
<sk-chase-dot></sk-chase-dot>
<!-- spinkit three bounce -->
<sk-t-bounce></sk-t-bounce>
<!-- spinkit circle -->
<sk-circle></sk-circle>
<!-- spinkit cube grid -->
<sk-cube-grid></sk-cube-grid>
<!-- spinkit fading circle -->
<sk-fade-circle></sk-fade-circle>
<!-- spinkit folding cube -->
<sk-fold-cube></sk-fold-cube>- 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 |
- 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 |
- 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 |
- 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 |
- 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 |
- 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 |
- 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 |
- 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 |
- 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 |
- 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 |
- Spinkit folding cube
| Attributes | Type | Default | Description |
|---|---|---|---|
| spin-color | Hex String | # 333 | Cube color. NOTICE : this value should be changed using CSS style |
<!-- spinkit rotating plane-->
<sk-rot-plane spin-width = '50' spin-height = '50' spin-speed = '1.5' spin-color = 'ffffff'></sk-rot-plane>MIT
This project is currently in progress ...