├── .gitignore
├── LICENSE.md
├── README.md
├── bower.json
├── build
    ├── angular-spinkit.js
    ├── angular-spinkit.min.css
    ├── angular-spinkit.min.js
    ├── index.js
    └── templates.js
├── gruntfile.js
├── package.json
└── src
    ├── angular-spinkit.css
    ├── angular-spinkit.js
    └── templates
        ├── chasingDotsSpinner.html
        ├── circleSpinner.html
        ├── cubeGridSpinner.html
        ├── doubleBounceSpinner.html
        ├── fadingCircleSpinner.html
        ├── pulseSpinner.html
        ├── rotatingPlaneSpinner.html
        ├── threeBounceSpinner.html
        ├── wanderingCubesSpinner.html
        ├── waveSpinner.html
        └── wordPressSpinner.html


/.gitignore:
--------------------------------------------------------------------------------
1 | .idea
2 | node_modules
3 | 
4 | 


--------------------------------------------------------------------------------
/LICENSE.md:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) 2013 Uri Goldshtein
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy of
 6 | this software and associated documentation files (the "Software"), to deal in
 7 | the Software without restriction, including without limitation the rights to
 8 | use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
 9 | the Software, and to permit persons to whom the Software is furnished to do so,
10 | subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
17 | FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
18 | COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
19 | IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
20 | CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | angular-spinkit
 2 | ===============
 3 | 
 4 | SpinKit (https://github.com/tobiasahlin/SpinKit) spinners for AngularJS
 5 | 
 6 | ## ng2-spin-kit - SpinKit spinners for AngularJS 2.x
 7 | 
 8 | https://github.com/WoltersKluwerPL/ng2-spin-kit
 9 | 
10 | 
11 | ## Usage
12 | 1. Install with bower:
13 |   ```javascript
14 |   bower install angular-spinkit --save
15 |   ```
16 | 
17 | 2. Add angular-spinkit.min.js and angular-spinkit.min.css to your main file (index.html)
18 |   ```html
19 |   <link rel="stylesheet" href="bower_components/angular-spinkit/build/angular-spinkit.min.css">
20 |   <script src="bower_components/angular-spinkit/build/angular-spinkit.min.js"></script>
21 |   ```
22 | 
23 | 3. Set `angular-spinkit` as a dependency in your module
24 |   ```javascript
25 |   var myapp = angular.module('myapp', ['angular-spinkit'])
26 |   ```
27 | 
28 | 4. Add rotating-plane-spinner, double-bounce-spinner, wave-spinner, wandering-cubes-spinner, pulse-spinner, chasing-dots-spinner or circle-spinner directive to the wanted element, example:
29 |   ```html
30 |   <rotating-plane-spinner></rotating-plane-spinner>
31 | <double-bounce-spinner></double-bounce-spinner>
32 | <wave-spinner></wave-spinner>
33 | <wandering-cubes-spinner></wandering-cubes-spinner>
34 | <pulse-spinner></pulse-spinner>
35 | <chasing-dots-spinner></chasing-dots-spinner>
36 | <circle-spinner></circle-spinner>
37 | <three-bounce-spinner></three-bounce-spinner>
38 | <cube-grid-spinner></cube-grid-spinner>
39 | <word-press-spinner></word-press-spinner>
40 | <fading-circle-spinner></fading-circle-spinner>
41 |   ```
42 | 
43 | 5. If you want to show the spinner while an image is loading just use the 'spinkit-image-preloader' directive:
44 |   ```html
45 |   <!-- The directive tries to copy dimensions from inline styles and attributes to the spinner placeholder -->
46 |   <img width='800' height='600' alt='Your description' ng-src='http://example/img.jpg' spinkit-image-preloader='rotating-plane-spinner' />
47 |   <img style='width:800px; height:800px' alt='Your escription' ng-src='http://example/img.jpg' spinkit-image-preloader='rotating-plane-spinner' />
48 | 
49 |   <!-- Also feel free to set width/height and other properties through CSS just configure your own css-class using the 'spinkit-image-preloader-class' attribute (or use css-class by default "spinner-wrapper") -->
50 |   <img alt='Your description' ng-src='http://example/img.jpg' spinkit-image-preloader='cube-grid-spinner' spinkit-image-preloader-class='rotating-plane-spinner' />
51 |   ```
52 |   You can listen to the image loaded event.
53 |    ```javascript
54 |   // in controller
55 |   $scope.$on('angular-spinkit:imageLoaded');
56 |   ```
57 | 
58 | 6. Add all your requests and ideas in the issues area or send us a pull request!
59 | 
60 | ## Example
61 | You can check out this live example here: http://jsfiddle.net/Urigo/638AA/18/
62 | 


--------------------------------------------------------------------------------
/bower.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "angular-spinkit",
 3 |   "version": "0.3.4",
 4 |   "authors": [
 5 |     "Urigo <uri.goldshtein@gmail.com>"
 6 |   ],
 7 |   "description": "SpinKit (https://github.com/tobiasahlin/SpinKit) spinners for AngularJS",
 8 |   "main": ["./build/angular-spinkit.js", "./build/angular-spinkit.min.css"],
 9 |   "keywords": [
10 |     "spinner",
11 |     "SpinKit",
12 |     "spinners",
13 |     "AngularJS",
14 |     "ngSpinKit",
15 |     "preloader",
16 |     "image spinner",
17 |     "image preloader",
18 |     "loading indicator"
19 |   ],
20 |   "license": "MIT",
21 |   "homepage": "https://github.com/Urigo",
22 |   "ignore": [
23 |     "**/.*",
24 |     "node_modules",
25 |     "bower_components",
26 |     "app/bower_components",
27 |     "test",
28 |     "tests"
29 |   ],
30 |   "dependencies": {
31 |     "angular": "*"
32 |   }
33 | }
34 | 


--------------------------------------------------------------------------------
/build/angular-spinkit.js:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * angular-spinkit module
  3 |  * SpinKit (https://github.com/tobiasahlin/SpinKit) spinners for AngularJS
  4 |  *
  5 |  * Author: Urigo - https://github.com/Urigo
  6 |  */
  7 | 'use strict';
  8 | 
  9 | angular.module('angular-spinkit',
 10 |   [
 11 |     'ngRotatingPlaneSpinner',
 12 |     'ngDoubleBounceSpinner',
 13 |     'ngWaveSpinner',
 14 |     'ngWanderingCubesSpinner',
 15 |     'ngPulseSpinner',
 16 |     'ngChasingDotsSpinner',
 17 |     'ngCircleSpinner',
 18 |     'ngThreeBounceSpinner',
 19 |     'ngCubeGridSpinner',
 20 |     'ngWordPressSpinner',
 21 |     'ngFadingCircleSpinner',
 22 |     'ngSpinkitImagePreloader'
 23 |   ]);
 24 | 
 25 | angular.module('ngRotatingPlaneSpinner', []).directive('rotatingPlaneSpinner', function () {
 26 |   return {
 27 |     restrict: 'E',
 28 |     templateUrl: 'src/templates/rotatingPlaneSpinner.html'
 29 |   };
 30 | });
 31 | 
 32 | angular.module('ngDoubleBounceSpinner', []).directive('doubleBounceSpinner', function () {
 33 |   return {
 34 |     restrict: 'E',
 35 |     templateUrl: 'src/templates/doubleBounceSpinner.html'
 36 |   };
 37 | });
 38 | 
 39 | angular.module('ngWaveSpinner', []).directive('waveSpinner', function () {
 40 |   return {
 41 |     restrict: 'E',
 42 |     templateUrl: 'src/templates/waveSpinner.html'
 43 |   };
 44 | });
 45 | 
 46 | angular.module('ngWanderingCubesSpinner', []).directive('wanderingCubesSpinner', function () {
 47 |   return {
 48 |     restrict: 'E',
 49 |     templateUrl: 'src/templates/wanderingCubesSpinner.html'
 50 |   };
 51 | });
 52 | 
 53 | angular.module('ngPulseSpinner', []).directive('pulseSpinner', function () {
 54 |   return {
 55 |     restrict: 'E',
 56 |     templateUrl: 'src/templates/pulseSpinner.html'
 57 |   };
 58 | });
 59 | 
 60 | angular.module('ngChasingDotsSpinner', []).directive('chasingDotsSpinner', function () {
 61 |   return {
 62 |     restrict: 'E',
 63 |     templateUrl: 'src/templates/chasingDotsSpinner.html'
 64 |   };
 65 | });
 66 | 
 67 | angular.module('ngCircleSpinner', []).directive('circleSpinner', function () {
 68 |   return {
 69 |     restrict: 'E',
 70 |     templateUrl: 'src/templates/circleSpinner.html'
 71 |   };
 72 | });
 73 | 
 74 | angular.module('ngThreeBounceSpinner', []).directive('threeBounceSpinner', function () {
 75 |   return {
 76 |     restrict: 'E',
 77 |     templateUrl: 'src/templates/threeBounceSpinner.html'
 78 |   };
 79 | });
 80 | 
 81 | angular.module('ngCubeGridSpinner', []).directive('cubeGridSpinner', function () {
 82 |   return {
 83 |     restrict: 'E',
 84 |     templateUrl: 'src/templates/cubeGridSpinner.html'
 85 |   };
 86 | });
 87 | 
 88 | angular.module('ngWordPressSpinner', []).directive('wordPressSpinner', function () {
 89 |   return {
 90 |     restrict: 'E',
 91 |     templateUrl: 'src/templates/wordPressSpinner.html'
 92 |   };
 93 | });
 94 | 
 95 | angular.module('ngFadingCircleSpinner', []).directive('fadingCircleSpinner', function () {
 96 |   return {
 97 |     restrict: 'E',
 98 |     templateUrl: 'src/templates/fadingCircleSpinner.html'
 99 |   };
100 | });
101 | 
102 | angular.module('ngSpinkitImagePreloader', []).directive('spinkitImagePreloader', ['$compile', '$injector', '$rootScope', function ($compile, $injector, $rootScope) {
103 |   return {
104 |     restrict: 'A',
105 |     scope: {
106 |       ngSrc: '@',
107 |       spinkitImagePreloader: '@',
108 |       spinkitImagePreloaderClass: '@'
109 |     },
110 |     link: function(scope, element, attrs) {
111 |       var spinnerWrapper,
112 |           spinnerWrapperClass = scope.spinkitImagePreloaderClass || 'spinner-wrapper',
113 |           spinner;
114 | 
115 |       // Check for the existence of the spinkit-directive
116 |       if(!$injector.has(attrs.$normalize(scope.spinkitImagePreloader) + 'Directive'))
117 |         return;
118 | 
119 |       // Create and configure DOM-spinner-elements
120 |       spinnerWrapper = angular.element('<div/>').addClass(spinnerWrapperClass),
121 |       spinner = $compile('<' + scope.spinkitImagePreloader + '/>')(scope);
122 |       spinnerWrapper.append(spinner);
123 |       spinnerWrapper.css('overflow', 'hidden');
124 | 
125 |       element.after(spinnerWrapper);
126 | 
127 |       // Copy dimensions (inline and attributes) from the image to the spinner wrapper
128 |       if(element.css('width'))
129 |         spinnerWrapper.css('width', element.css('width'));
130 | 
131 |       if(attrs.width)
132 |         spinnerWrapper.css('width', attrs.width + 'px');
133 | 
134 |       if(element.css('height'))
135 |         spinnerWrapper.css('height', element.css('height'));
136 | 
137 |       if(attrs.height)
138 |         spinnerWrapper.css('height', attrs.height + 'px');
139 | 
140 |       element.on('load', function () {
141 |         spinnerWrapper.css('display', 'none');
142 |         element.css('display', 'block');
143 |         $rootScope.$broadcast('angular-spinkit:imageLoaded');
144 |       });
145 | 
146 |       scope.$watch('ngSrc', function () {
147 |         spinnerWrapper.css('display', 'block');
148 |         element.css('display', 'none');
149 |       });
150 |     }
151 |   };
152 | }]);
153 | angular.module('angular-spinkit').run(['$templateCache', function($templateCache) {
154 |   'use strict';
155 | 
156 |   $templateCache.put('src/templates/chasingDotsSpinner.html',
157 |     "<div class=\"chasing-dots-spinner\">\n" +
158 |     "  <div class=\"dot1\"></div>\n" +
159 |     "  <div class=\"dot2\"></div>\n" +
160 |     "</div>\n"
161 |   );
162 | 
163 | 
164 |   $templateCache.put('src/templates/circleSpinner.html',
165 |     "<div class=\"spinning-dots-spinner\">\n" +
166 |     "  <div class=\"spinner-container container1\">\n" +
167 |     "    <div class=\"circle1\"></div>\n" +
168 |     "    <div class=\"circle2\"></div>\n" +
169 |     "    <div class=\"circle3\"></div>\n" +
170 |     "    <div class=\"circle4\"></div>\n" +
171 |     "  </div>\n" +
172 |     "  <div class=\"spinner-container container2\">\n" +
173 |     "    <div class=\"circle1\"></div>\n" +
174 |     "    <div class=\"circle2\"></div>\n" +
175 |     "    <div class=\"circle3\"></div>\n" +
176 |     "    <div class=\"circle4\"></div>\n" +
177 |     "  </div>\n" +
178 |     "  <div class=\"spinner-container container3\">\n" +
179 |     "    <div class=\"circle1\"></div>\n" +
180 |     "    <div class=\"circle2\"></div>\n" +
181 |     "    <div class=\"circle3\"></div>\n" +
182 |     "    <div class=\"circle4\"></div>\n" +
183 |     "  </div>\n" +
184 |     "</div>\n"
185 |   );
186 | 
187 | 
188 |   $templateCache.put('src/templates/cubeGridSpinner.html',
189 |     "<div class=\"cube-grid-spinner\">\n" +
190 |     "  <div class=\"cube\"></div>\n" +
191 |     "  <div class=\"cube\"></div>\n" +
192 |     "  <div class=\"cube\"></div>\n" +
193 |     "  <div class=\"cube\"></div>\n" +
194 |     "  <div class=\"cube\"></div>\n" +
195 |     "  <div class=\"cube\"></div>\n" +
196 |     "  <div class=\"cube\"></div>\n" +
197 |     "  <div class=\"cube\"></div>\n" +
198 |     "  <div class=\"cube\"></div>\n" +
199 |     "</div>"
200 |   );
201 | 
202 | 
203 |   $templateCache.put('src/templates/doubleBounceSpinner.html',
204 |     "<div class=\"double-bounce-spinner\">\n" +
205 |     "  <div class=\"double-bounce1\"></div>\n" +
206 |     "  <div class=\"double-bounce2\"></div>\n" +
207 |     "</div>\n"
208 |   );
209 | 
210 | 
211 |   $templateCache.put('src/templates/fadingCircleSpinner.html',
212 |     "<div class=\"fading-circle-spinner\">\n" +
213 |     "  <div class=\"fading-circle1 fading-circle\"></div>\n" +
214 |     "  <div class=\"fading-circle2 fading-circle\"></div>\n" +
215 |     "  <div class=\"fading-circle3 fading-circle\"></div>\n" +
216 |     "  <div class=\"fading-circle4 fading-circle\"></div>\n" +
217 |     "  <div class=\"fading-circle5 fading-circle\"></div>\n" +
218 |     "  <div class=\"fading-circle6 fading-circle\"></div>\n" +
219 |     "  <div class=\"fading-circle7 fading-circle\"></div>\n" +
220 |     "  <div class=\"fading-circle8 fading-circle\"></div>\n" +
221 |     "  <div class=\"fading-circle9 fading-circle\"></div>\n" +
222 |     "  <div class=\"fading-circle10 fading-circle\"></div>\n" +
223 |     "  <div class=\"fading-circle11 fading-circle\"></div>\n" +
224 |     "  <div class=\"fading-circle12 fading-circle\"></div>\n" +
225 |     "</div>"
226 |   );
227 | 
228 | 
229 |   $templateCache.put('src/templates/pulseSpinner.html',
230 |     "<div class=\"pulse-spinner\"></div>\n"
231 |   );
232 | 
233 | 
234 |   $templateCache.put('src/templates/rotatingPlaneSpinner.html',
235 |     "<div class=\"three-dots-row-spinner\"></div>\n"
236 |   );
237 | 
238 | 
239 |   $templateCache.put('src/templates/threeBounceSpinner.html',
240 |     "<div class=\"three-bounce-spinner\">\n" +
241 |     "  <div class=\"bounce1\"></div>\n" +
242 |     "  <div class=\"bounce2\"></div>\n" +
243 |     "  <div class=\"bounce3\"></div>\n" +
244 |     "</div>"
245 |   );
246 | 
247 | 
248 |   $templateCache.put('src/templates/wanderingCubesSpinner.html',
249 |     "<div class=\"wandering-cubes-spinner\"></div>\n"
250 |   );
251 | 
252 | 
253 |   $templateCache.put('src/templates/waveSpinner.html',
254 |     "<div class=\"wave-spinner\">\n" +
255 |     "  <div class=\"rect1\"></div>\n" +
256 |     "  <div class=\"rect2\"></div>\n" +
257 |     "  <div class=\"rect3\"></div>\n" +
258 |     "  <div class=\"rect4\"></div>\n" +
259 |     "  <div class=\"rect5\"></div>\n" +
260 |     "</div>\n"
261 |   );
262 | 
263 | 
264 |   $templateCache.put('src/templates/wordPressSpinner.html',
265 |     "<div class=\"word-press-spinner\">\n" +
266 |     "  <span class=\"inner-circle\"></span>\n" +
267 |     "</div>"
268 |   );
269 | 
270 | }]);
271 | 


--------------------------------------------------------------------------------
/build/angular-spinkit.min.css:
--------------------------------------------------------------------------------
1 | /*! angular-spinkit 2016-02-22 */
2 | .chasing-dots-spinner{margin:100px auto;width:40px;height:40px;position:relative;text-align:center;-webkit-animation:rotate 2s infinite linear;animation:rotate 2s infinite linear}.dot1,.dot2{width:60%;height:60%;display:inline-block;position:absolute;top:0;background-color:#333;border-radius:100%;-webkit-animation:bounce 2s infinite ease-in-out;animation:bounce 2s infinite ease-in-out}.dot2{top:auto;bottom:0;-webkit-animation-delay:-1s;animation-delay:-1s}@-webkit-keyframes rotate{100%{-webkit-transform:rotate(360deg)}}@keyframes rotate{100%{transform:rotate(360deg);-webkit-transform:rotate(360deg)}}@-webkit-keyframes bounce{0%,100%{-webkit-transform:scale(0)}50%{-webkit-transform:scale(1)}}@keyframes bounce{0%,100%{transform:scale(0);-webkit-transform:scale(0)}50%{transform:scale(1);-webkit-transform:scale(1)}}.spinning-dots-spinner{margin:100px auto;width:20px;height:20px;position:relative}.container1>div,.container2>div,.container3>div{width:6px;height:6px;background-color:#333;border-radius:100%;position:absolute;-webkit-animation:bouncedelay 1.2s infinite ease-in-out;animation:bouncedelay 1.2s infinite ease-in-out;-webkit-animation-fill-mode:both;animation-fill-mode:both}.spinning-dots-spinner .spinner-container{position:absolute;width:100%;height:100%}.container2{-webkit-transform:rotateZ(45deg);transform:rotateZ(45deg)}.container3{-webkit-transform:rotateZ(90deg);transform:rotateZ(90deg)}.circle1{top:0;left:0}.circle2{top:0;right:0}.circle3{right:0;bottom:0}.circle4{left:0;bottom:0}.container2 .circle1{-webkit-animation-delay:-1.1s;animation-delay:-1.1s}.container3 .circle1{-webkit-animation-delay:-1s;animation-delay:-1s}.container1 .circle2{-webkit-animation-delay:-.9s;animation-delay:-.9s}.container2 .circle2{-webkit-animation-delay:-.8s;animation-delay:-.8s}.container3 .circle2{-webkit-animation-delay:-.7s;animation-delay:-.7s}.container1 .circle3{-webkit-animation-delay:-.6s;animation-delay:-.6s}.container2 .circle3{-webkit-animation-delay:-.5s;animation-delay:-.5s}.container3 .circle3{-webkit-animation-delay:-.4s;animation-delay:-.4s}.container1 .circle4{-webkit-animation-delay:-.3s;animation-delay:-.3s}.container2 .circle4{-webkit-animation-delay:-.2s;animation-delay:-.2s}.container3 .circle4{-webkit-animation-delay:-.1s;animation-delay:-.1s}@-webkit-keyframes bouncedelay{0%,100%,80%{-webkit-transform:scale(0)}40%{-webkit-transform:scale(1)}}@keyframes bouncedelay{0%,100%,80%{transform:scale(0);-webkit-transform:scale(0)}40%{transform:scale(1);-webkit-transform:scale(1)}}.double-bounce-spinner{width:40px;height:40px;position:relative;margin:100px auto}.double-bounce1,.double-bounce2{width:100%;height:100%;border-radius:50%;background-color:#333;opacity:.6;position:absolute;top:0;left:0;-webkit-animation:bounce 2s infinite ease-in-out;animation:bounce 2s infinite ease-in-out}.double-bounce2{-webkit-animation-delay:-1s;animation-delay:-1s}@-webkit-keyframes bounce{0%,100%{-webkit-transform:scale(0)}50%{-webkit-transform:scale(1)}}@keyframes bounce{0%,100%{transform:scale(0);-webkit-transform:scale(0)}50%{transform:scale(1);-webkit-transform:scale(1)}}.pulse-spinner{width:40px;height:40px;margin:100px auto;background-color:#333;border-radius:100%;-webkit-animation:scaleout 1s infinite ease-in-out;animation:scaleout 1s infinite ease-in-out}@-webkit-keyframes scaleout{0%{-webkit-transform:scale(0)}100%{-webkit-transform:scale(1);opacity:0}}@keyframes scaleout{0%{transform:scale(0);-webkit-transform:scale(0)}100%{transform:scale(1);-webkit-transform:scale(1);opacity:0}}.three-dots-row-spinner{width:30px;height:30px;background-color:#333;margin:100px auto;-webkit-animation:rotateplane 1.2s infinite ease-in-out;animation:rotateplane 1.2s infinite ease-in-out}@-webkit-keyframes rotateplane{0%{-webkit-transform:perspective(120px)}50%{-webkit-transform:perspective(120px) rotateY(180deg)}100%{-webkit-transform:perspective(120px) rotateY(180deg) rotateX(180deg)}}@keyframes rotateplane{0%{transform:perspective(120px) rotateX(0deg) rotateY(0deg);-webkit-transform:perspective(120px) rotateX(0deg) rotateY(0deg)}50%{transform:perspective(120px) rotateX(-180.1deg) rotateY(0deg);-webkit-transform:perspective(120px) rotateX(-180.1deg) rotateY(0deg)}100%{transform:perspective(120px) rotateX(-180deg) rotateY(-179.9deg);-webkit-transform:perspective(120px) rotateX(-180deg) rotateY(-179.9deg)}}.wandering-cubes-spinner{margin:100px auto;width:32px;height:32px;position:relative}.wandering-cubes-spinner:after,.wandering-cubes-spinner:before{content:'';background-color:#333;width:10px;height:10px;position:absolute;top:0;left:0;-webkit-animation:cubemove 1.8s infinite ease-in-out;animation:cubemove 1.8s infinite ease-in-out}.wandering-cubes-spinner:after{-webkit-animation-delay:-.9s;animation-delay:-.9s}@-webkit-keyframes cubemove{25%{-webkit-transform:translateX(22px) rotate(-90deg) scale(0.5)}50%{-webkit-transform:translateX(22px) translateY(22px) rotate(-180deg)}75%{-webkit-transform:translateX(0px) translateY(22px) rotate(-270deg) scale(0.5)}100%{-webkit-transform:rotate(-360deg)}}@keyframes cubemove{25%{transform:translateX(42px) rotate(-90deg) scale(0.5);-webkit-transform:translateX(42px) rotate(-90deg) scale(0.5)}50%{transform:translateX(42px) translateY(42px) rotate(-179deg);-webkit-transform:translateX(42px) translateY(42px) rotate(-179deg)}50.1%{transform:translateX(42px) translateY(42px) rotate(-180deg);-webkit-transform:translateX(42px) translateY(42px) rotate(-180deg)}75%{transform:translateX(0px) translateY(42px) rotate(-270deg) scale(0.5);-webkit-transform:translateX(0px) translateY(42px) rotate(-270deg) scale(0.5)}100%{transform:rotate(-360deg);-webkit-transform:rotate(-360deg)}}.wave-spinner{margin:100px auto;width:50px;height:30px;text-align:center;font-size:10px}.wave-spinner>div{background-color:#333;height:100%;width:6px;display:inline-block;-webkit-animation:stretchdelay 1.2s infinite ease-in-out;animation:stretchdelay 1.2s infinite ease-in-out}.wave-spinner .rect2{-webkit-animation-delay:-1.1s;animation-delay:-1.1s}.wave-spinner .rect3{-webkit-animation-delay:-1s;animation-delay:-1s}.wave-spinner .rect4{-webkit-animation-delay:-.9s;animation-delay:-.9s}.wave-spinner .rect5{-webkit-animation-delay:-.8s;animation-delay:-.8s}@-webkit-keyframes stretchdelay{0%,100%,40%{-webkit-transform:scaleY(0.4)}20%{-webkit-transform:scaleY(1)}}@keyframes stretchdelay{0%,100%,40%{transform:scaleY(0.4);-webkit-transform:scaleY(0.4)}20%{transform:scaleY(1);-webkit-transform:scaleY(1)}}.three-bounce-spinner{margin:100px auto 0;width:70px;text-align:center}.three-bounce-spinner>div{width:18px;height:18px;background-color:#333;border-radius:100%;display:inline-block;-webkit-animation:bouncedelay 1.4s infinite ease-in-out both;animation:bouncedelay 1.4s infinite ease-in-out both}.three-bounce-spinner .bounce1{-webkit-animation-delay:-.32s;animation-delay:-.32s}.three-bounce-spinner .bounce2{-webkit-animation-delay:-.16s;animation-delay:-.16s}@-webkit-keyframes bouncedelay{0%,100%,80%{-webkit-transform:scale(0)}40%{-webkit-transform:scale(1)}}@keyframes bouncedelay{0%,100%,80%{transform:scale(0);-webkit-transform:scale(0)}40%{transform:scale(1);-webkit-transform:scale(1)}}.cube-grid-spinner{width:30px;height:30px;margin:100px auto}.cube{width:33%;height:33%;background:#333;float:left;-webkit-animation:scaleDelay 1.3s infinite ease-in-out;animation:scaleDelay 1.3s infinite ease-in-out}.cube-grid-spinner .cube:nth-child(1){-webkit-animation-delay:.2s;animation-delay:.2s}.cube-grid-spinner .cube:nth-child(2){-webkit-animation-delay:.3s;animation-delay:.3s}.cube-grid-spinner .cube:nth-child(3){-webkit-animation-delay:.4s;animation-delay:.4s}.cube-grid-spinner .cube:nth-child(4){-webkit-animation-delay:.1s;animation-delay:.1s}.cube-grid-spinner .cube:nth-child(5){-webkit-animation-delay:.2s;animation-delay:.2s}.cube-grid-spinner .cube:nth-child(6){-webkit-animation-delay:.3s;animation-delay:.3s}.cube-grid-spinner .cube:nth-child(7){-webkit-animation-delay:0s;animation-delay:0s}.cube-grid-spinner .cube:nth-child(8){-webkit-animation-delay:.1s;animation-delay:.1s}.cube-grid-spinner .cube:nth-child(9){-webkit-animation-delay:.2s;animation-delay:.2s}@-webkit-keyframes scaleDelay{0%,100%,70%{-webkit-transform:scale3D(1,1,1)}35%{-webkit-transform:scale3D(0,0,1)}}@keyframes scaleDelay{0%,100%,70%{-webkit-transform:scale3D(1,1,1);transform:scale3D(1,1,1)}35%{-webkit-transform:scale3D(1,1,1);transform:scale3D(0,0,1)}}.word-press-spinner{background:#333;width:30px;height:30px;display:inline-block;border-radius:30px;position:relative;-webkit-animation:inner-circle 1s linear infinite;animation:inner-circle 1s linear infinite}.inner-circle{display:block;background:#fff;width:8px;height:8px;position:absolute;border-radius:8px;top:5px;left:5px}@-webkit-keyframes inner-circle{0%{-webkit-transform:rotate(0)}100%{-webkit-transform:rotate(360deg)}}@keyframes inner-circle{0%{transform:rotate(0);-webkit-transform:rotate(0)}100%{transform:rotate(360deg);-webkit-transform:rotate(360deg)}}.fading-circle-spinner{margin:100px auto;width:22px;height:22px;position:relative}.fading-circle{width:100%;height:100%;position:absolute;left:0;top:0}.fading-circle:before{content:'';display:block;margin:0 auto;width:18%;height:18%;background-color:#333;border-radius:100%;-webkit-animation:fadedelay 1.2s infinite ease-in-out both;animation:fadedelay 1.2s infinite ease-in-out both}.fading-circle2{transform:rotate(30deg);-webkit-transform:rotate(30deg)}.fading-circle3{transform:rotate(60deg);-webkit-transform:rotate(60deg)}.fading-circle4{transform:rotate(90deg);-webkit-transform:rotate(90deg)}.fading-circle5{transform:rotate(120deg);-webkit-transform:rotate(120deg)}.fading-circle6{transform:rotate(150deg);-webkit-transform:rotate(150deg)}.fading-circle7{transform:rotate(180deg);-webkit-transform:rotate(180deg)}.fading-circle8{transform:rotate(210deg);-webkit-transform:rotate(210deg)}.fading-circle9{transform:rotate(240deg);-webkit-transform:rotate(240deg)}.fading-circle10{transform:rotate(270deg);-webkit-transform:rotate(270deg)}.fading-circle11{transform:rotate(300deg);-webkit-transform:rotate(300deg)}.fading-circle12{transform:rotate(330deg);-webkit-transform:rotate(330deg)}.fading-circle2:before{animation-delay:-1.1s;-webkit-animation-delay:-1.1s}.fading-circle3:before{animation-delay:-1s;-webkit-animation-delay:-1s}.fading-circle4:before{animation-delay:-.9s;-webkit-animation-delay:-.9s}.fading-circle5:before{animation-delay:-.8s;-webkit-animation-delay:-.8s}.fading-circle6:before{animation-delay:-.7s;-webkit-animation-delay:-.7s}.fading-circle7:before{animation-delay:-.6s;-webkit-animation-delay:-.6s}.fading-circle8:before{animation-delay:-.5s;-webkit-animation-delay:-.5s}.fading-circle9:before{animation-delay:-.4s;-webkit-animation-delay:-.4s}.fading-circle10:before{animation-delay:-.3s;-webkit-animation-delay:-.3s}.fading-circle11:before{animation-delay:-.2s;-webkit-animation-delay:-.2s}.fading-circle12:before{animation-delay:-.1s;-webkit-animation-delay:-.1s}@-webkit-keyframes fadedelay{0%,100%,39%{opacity:0}40%{opacity:1}}@keyframes fadedelay{0%,100%,39%{opacity:0}40%{opacity:1}}


--------------------------------------------------------------------------------
/build/angular-spinkit.min.js:
--------------------------------------------------------------------------------
1 | /*! angular-spinkit 2016-02-22 */
2 | "use strict";angular.module("angular-spinkit",["ngRotatingPlaneSpinner","ngDoubleBounceSpinner","ngWaveSpinner","ngWanderingCubesSpinner","ngPulseSpinner","ngChasingDotsSpinner","ngCircleSpinner","ngThreeBounceSpinner","ngCubeGridSpinner","ngWordPressSpinner","ngFadingCircleSpinner","ngSpinkitImagePreloader"]),angular.module("ngRotatingPlaneSpinner",[]).directive("rotatingPlaneSpinner",function(){return{restrict:"E",templateUrl:"src/templates/rotatingPlaneSpinner.html"}}),angular.module("ngDoubleBounceSpinner",[]).directive("doubleBounceSpinner",function(){return{restrict:"E",templateUrl:"src/templates/doubleBounceSpinner.html"}}),angular.module("ngWaveSpinner",[]).directive("waveSpinner",function(){return{restrict:"E",templateUrl:"src/templates/waveSpinner.html"}}),angular.module("ngWanderingCubesSpinner",[]).directive("wanderingCubesSpinner",function(){return{restrict:"E",templateUrl:"src/templates/wanderingCubesSpinner.html"}}),angular.module("ngPulseSpinner",[]).directive("pulseSpinner",function(){return{restrict:"E",templateUrl:"src/templates/pulseSpinner.html"}}),angular.module("ngChasingDotsSpinner",[]).directive("chasingDotsSpinner",function(){return{restrict:"E",templateUrl:"src/templates/chasingDotsSpinner.html"}}),angular.module("ngCircleSpinner",[]).directive("circleSpinner",function(){return{restrict:"E",templateUrl:"src/templates/circleSpinner.html"}}),angular.module("ngThreeBounceSpinner",[]).directive("threeBounceSpinner",function(){return{restrict:"E",templateUrl:"src/templates/threeBounceSpinner.html"}}),angular.module("ngCubeGridSpinner",[]).directive("cubeGridSpinner",function(){return{restrict:"E",templateUrl:"src/templates/cubeGridSpinner.html"}}),angular.module("ngWordPressSpinner",[]).directive("wordPressSpinner",function(){return{restrict:"E",templateUrl:"src/templates/wordPressSpinner.html"}}),angular.module("ngFadingCircleSpinner",[]).directive("fadingCircleSpinner",function(){return{restrict:"E",templateUrl:"src/templates/fadingCircleSpinner.html"}}),angular.module("ngSpinkitImagePreloader",[]).directive("spinkitImagePreloader",["$compile","$injector","$rootScope",function(a,b,c){return{restrict:"A",scope:{ngSrc:"@",spinkitImagePreloader:"@",spinkitImagePreloaderClass:"@"},link:function(d,e,f){var g,h,i=d.spinkitImagePreloaderClass||"spinner-wrapper";b.has(f.$normalize(d.spinkitImagePreloader)+"Directive")&&(g=angular.element("<div/>").addClass(i),h=a("<"+d.spinkitImagePreloader+"/>")(d),g.append(h),g.css("overflow","hidden"),e.after(g),e.css("width")&&g.css("width",e.css("width")),f.width&&g.css("width",f.width+"px"),e.css("height")&&g.css("height",e.css("height")),f.height&&g.css("height",f.height+"px"),e.on("load",function(){g.css("display","none"),e.css("display","block"),c.$broadcast("angular-spinkit:imageLoaded")}),d.$watch("ngSrc",function(){g.css("display","block"),e.css("display","none")}))}}}]),angular.module("angular-spinkit").run(["$templateCache",function(a){a.put("src/templates/chasingDotsSpinner.html",'<div class="chasing-dots-spinner">\n  <div class="dot1"></div>\n  <div class="dot2"></div>\n</div>\n'),a.put("src/templates/circleSpinner.html",'<div class="spinning-dots-spinner">\n  <div class="spinner-container container1">\n    <div class="circle1"></div>\n    <div class="circle2"></div>\n    <div class="circle3"></div>\n    <div class="circle4"></div>\n  </div>\n  <div class="spinner-container container2">\n    <div class="circle1"></div>\n    <div class="circle2"></div>\n    <div class="circle3"></div>\n    <div class="circle4"></div>\n  </div>\n  <div class="spinner-container container3">\n    <div class="circle1"></div>\n    <div class="circle2"></div>\n    <div class="circle3"></div>\n    <div class="circle4"></div>\n  </div>\n</div>\n'),a.put("src/templates/cubeGridSpinner.html",'<div class="cube-grid-spinner">\n  <div class="cube"></div>\n  <div class="cube"></div>\n  <div class="cube"></div>\n  <div class="cube"></div>\n  <div class="cube"></div>\n  <div class="cube"></div>\n  <div class="cube"></div>\n  <div class="cube"></div>\n  <div class="cube"></div>\n</div>'),a.put("src/templates/doubleBounceSpinner.html",'<div class="double-bounce-spinner">\n  <div class="double-bounce1"></div>\n  <div class="double-bounce2"></div>\n</div>\n'),a.put("src/templates/fadingCircleSpinner.html",'<div class="fading-circle-spinner">\n  <div class="fading-circle1 fading-circle"></div>\n  <div class="fading-circle2 fading-circle"></div>\n  <div class="fading-circle3 fading-circle"></div>\n  <div class="fading-circle4 fading-circle"></div>\n  <div class="fading-circle5 fading-circle"></div>\n  <div class="fading-circle6 fading-circle"></div>\n  <div class="fading-circle7 fading-circle"></div>\n  <div class="fading-circle8 fading-circle"></div>\n  <div class="fading-circle9 fading-circle"></div>\n  <div class="fading-circle10 fading-circle"></div>\n  <div class="fading-circle11 fading-circle"></div>\n  <div class="fading-circle12 fading-circle"></div>\n</div>'),a.put("src/templates/pulseSpinner.html",'<div class="pulse-spinner"></div>\n'),a.put("src/templates/rotatingPlaneSpinner.html",'<div class="three-dots-row-spinner"></div>\n'),a.put("src/templates/threeBounceSpinner.html",'<div class="three-bounce-spinner">\n  <div class="bounce1"></div>\n  <div class="bounce2"></div>\n  <div class="bounce3"></div>\n</div>'),a.put("src/templates/wanderingCubesSpinner.html",'<div class="wandering-cubes-spinner"></div>\n'),a.put("src/templates/waveSpinner.html",'<div class="wave-spinner">\n  <div class="rect1"></div>\n  <div class="rect2"></div>\n  <div class="rect3"></div>\n  <div class="rect4"></div>\n  <div class="rect5"></div>\n</div>\n'),a.put("src/templates/wordPressSpinner.html",'<div class="word-press-spinner">\n  <span class="inner-circle"></span>\n</div>')}]);


--------------------------------------------------------------------------------
/build/index.js:
--------------------------------------------------------------------------------
1 | require('./angular-spinkit');
2 | module.exports = 'angularSpinkit';
3 | 


--------------------------------------------------------------------------------
/build/templates.js:
--------------------------------------------------------------------------------
  1 | angular.module('angular-spinkit').run(['$templateCache', function($templateCache) {
  2 |   'use strict';
  3 | 
  4 |   $templateCache.put('src/templates/chasingDotsSpinner.html',
  5 |     "<div class=\"chasing-dots-spinner\">\n" +
  6 |     "  <div class=\"dot1\"></div>\n" +
  7 |     "  <div class=\"dot2\"></div>\n" +
  8 |     "</div>\n"
  9 |   );
 10 | 
 11 | 
 12 |   $templateCache.put('src/templates/circleSpinner.html',
 13 |     "<div class=\"spinning-dots-spinner\">\n" +
 14 |     "  <div class=\"spinner-container container1\">\n" +
 15 |     "    <div class=\"circle1\"></div>\n" +
 16 |     "    <div class=\"circle2\"></div>\n" +
 17 |     "    <div class=\"circle3\"></div>\n" +
 18 |     "    <div class=\"circle4\"></div>\n" +
 19 |     "  </div>\n" +
 20 |     "  <div class=\"spinner-container container2\">\n" +
 21 |     "    <div class=\"circle1\"></div>\n" +
 22 |     "    <div class=\"circle2\"></div>\n" +
 23 |     "    <div class=\"circle3\"></div>\n" +
 24 |     "    <div class=\"circle4\"></div>\n" +
 25 |     "  </div>\n" +
 26 |     "  <div class=\"spinner-container container3\">\n" +
 27 |     "    <div class=\"circle1\"></div>\n" +
 28 |     "    <div class=\"circle2\"></div>\n" +
 29 |     "    <div class=\"circle3\"></div>\n" +
 30 |     "    <div class=\"circle4\"></div>\n" +
 31 |     "  </div>\n" +
 32 |     "</div>\n"
 33 |   );
 34 | 
 35 | 
 36 |   $templateCache.put('src/templates/cubeGridSpinner.html',
 37 |     "<div class=\"cube-grid-spinner\">\n" +
 38 |     "  <div class=\"cube\"></div>\n" +
 39 |     "  <div class=\"cube\"></div>\n" +
 40 |     "  <div class=\"cube\"></div>\n" +
 41 |     "  <div class=\"cube\"></div>\n" +
 42 |     "  <div class=\"cube\"></div>\n" +
 43 |     "  <div class=\"cube\"></div>\n" +
 44 |     "  <div class=\"cube\"></div>\n" +
 45 |     "  <div class=\"cube\"></div>\n" +
 46 |     "  <div class=\"cube\"></div>\n" +
 47 |     "</div>"
 48 |   );
 49 | 
 50 | 
 51 |   $templateCache.put('src/templates/doubleBounceSpinner.html',
 52 |     "<div class=\"double-bounce-spinner\">\n" +
 53 |     "  <div class=\"double-bounce1\"></div>\n" +
 54 |     "  <div class=\"double-bounce2\"></div>\n" +
 55 |     "</div>\n"
 56 |   );
 57 | 
 58 | 
 59 |   $templateCache.put('src/templates/fadingCircleSpinner.html',
 60 |     "<div class=\"fading-circle-spinner\">\n" +
 61 |     "  <div class=\"fading-circle1 fading-circle\"></div>\n" +
 62 |     "  <div class=\"fading-circle2 fading-circle\"></div>\n" +
 63 |     "  <div class=\"fading-circle3 fading-circle\"></div>\n" +
 64 |     "  <div class=\"fading-circle4 fading-circle\"></div>\n" +
 65 |     "  <div class=\"fading-circle5 fading-circle\"></div>\n" +
 66 |     "  <div class=\"fading-circle6 fading-circle\"></div>\n" +
 67 |     "  <div class=\"fading-circle7 fading-circle\"></div>\n" +
 68 |     "  <div class=\"fading-circle8 fading-circle\"></div>\n" +
 69 |     "  <div class=\"fading-circle9 fading-circle\"></div>\n" +
 70 |     "  <div class=\"fading-circle10 fading-circle\"></div>\n" +
 71 |     "  <div class=\"fading-circle11 fading-circle\"></div>\n" +
 72 |     "  <div class=\"fading-circle12 fading-circle\"></div>\n" +
 73 |     "</div>"
 74 |   );
 75 | 
 76 | 
 77 |   $templateCache.put('src/templates/pulseSpinner.html',
 78 |     "<div class=\"pulse-spinner\"></div>\n"
 79 |   );
 80 | 
 81 | 
 82 |   $templateCache.put('src/templates/rotatingPlaneSpinner.html',
 83 |     "<div class=\"three-dots-row-spinner\"></div>\n"
 84 |   );
 85 | 
 86 | 
 87 |   $templateCache.put('src/templates/threeBounceSpinner.html',
 88 |     "<div class=\"three-bounce-spinner\">\n" +
 89 |     "  <div class=\"bounce1\"></div>\n" +
 90 |     "  <div class=\"bounce2\"></div>\n" +
 91 |     "  <div class=\"bounce3\"></div>\n" +
 92 |     "</div>"
 93 |   );
 94 | 
 95 | 
 96 |   $templateCache.put('src/templates/wanderingCubesSpinner.html',
 97 |     "<div class=\"wandering-cubes-spinner\"></div>\n"
 98 |   );
 99 | 
100 | 
101 |   $templateCache.put('src/templates/waveSpinner.html',
102 |     "<div class=\"wave-spinner\">\n" +
103 |     "  <div class=\"rect1\"></div>\n" +
104 |     "  <div class=\"rect2\"></div>\n" +
105 |     "  <div class=\"rect3\"></div>\n" +
106 |     "  <div class=\"rect4\"></div>\n" +
107 |     "  <div class=\"rect5\"></div>\n" +
108 |     "</div>\n"
109 |   );
110 | 
111 | 
112 |   $templateCache.put('src/templates/wordPressSpinner.html',
113 |     "<div class=\"word-press-spinner\">\n" +
114 |     "  <span class=\"inner-circle\"></span>\n" +
115 |     "</div>"
116 |   );
117 | 
118 | }]);
119 | 


--------------------------------------------------------------------------------
/gruntfile.js:
--------------------------------------------------------------------------------
 1 | module.exports = function(grunt) {
 2 | 
 3 |   // Project configuration.
 4 |   grunt.initConfig({
 5 |     pkg: grunt.file.readJSON('package.json'),
 6 |     ngtemplates: {
 7 |       angularSpinkit: {
 8 |         src: ['src/templates/**.html'],
 9 |         dest: 'build/templates.js',
10 |         options: {
11 |           module: 'angular-spinkit'
12 |         }
13 |       }
14 |     },
15 |     concat: {
16 |       dist: {
17 |         src: ['src/angular-spinkit.js', 'build/templates.js'],
18 |         dest: 'build/angular-spinkit.js'
19 |       }
20 |     },
21 |     uglify: {
22 |       options: {
23 |         banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
24 |       },
25 |       build: {
26 |         src: 'build/<%= pkg.name %>.js',
27 |         dest: 'build/<%= pkg.name %>.min.js'
28 |       }
29 |     },
30 |     cssmin: {
31 |       minify: {
32 |         options: {
33 |           banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */'
34 |         },
35 |         files: {
36 |           'build/angular-spinkit.min.css': ['src/angular-spinkit.css']
37 |         }
38 |       }
39 |     }
40 |   });
41 | 
42 |   // Load the plugin that provides the "uglify" task.
43 |   grunt.loadNpmTasks('grunt-angular-templates');
44 |   grunt.loadNpmTasks('grunt-contrib-concat');
45 |   grunt.loadNpmTasks('grunt-contrib-uglify');
46 |   grunt.loadNpmTasks('grunt-contrib-cssmin');
47 | 
48 |   // Default task(s).
49 |   grunt.registerTask('default', ['ngtemplates','concat:dist', 'uglify', 'cssmin']);
50 | 
51 | };
52 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "angular-spinkit",
 3 |   "main": "build/angular-spinkit.js",
 4 |   "version": "0.3.4",
 5 |   "devDependencies": {
 6 |     "grunt": "~0.4.2",
 7 |     "grunt-angular-templates": "~0.5.1",
 8 |     "grunt-contrib-concat": "~0.3.0",
 9 |     "grunt-contrib-cssmin": "^0.10.0",
10 |     "grunt-contrib-jshint": "~0.6.3",
11 |     "grunt-contrib-nodeunit": "~0.2.0",
12 |     "grunt-contrib-uglify": "~0.2.2"
13 |   }
14 | }
15 | 


--------------------------------------------------------------------------------
/src/angular-spinkit.css:
--------------------------------------------------------------------------------
  1 | /* Chasing dots spinner */
  2 | .chasing-dots-spinner {
  3 |   margin: 100px auto;
  4 |   width: 40px;
  5 |   height: 40px;
  6 |   position: relative;
  7 |   text-align: center;
  8 | 
  9 |   -webkit-animation: rotate 2.0s infinite linear;
 10 |   animation: rotate 2.0s infinite linear;
 11 | }
 12 | 
 13 | .dot1, .dot2 {
 14 |   width: 60%;
 15 |   height: 60%;
 16 |   display: inline-block;
 17 |   position: absolute;
 18 |   top: 0;
 19 |   background-color: #333;
 20 |   border-radius: 100%;
 21 | 
 22 |   -webkit-animation: bounce 2.0s infinite ease-in-out;
 23 |   animation: bounce 2.0s infinite ease-in-out;
 24 | }
 25 | 
 26 | .dot2 {
 27 |   top: auto;
 28 |   bottom: 0px;
 29 |   -webkit-animation-delay: -1.0s;
 30 |   animation-delay: -1.0s;
 31 | }
 32 | 
 33 | @-webkit-keyframes rotate { 100% { -webkit-transform: rotate(360deg) }}
 34 | @keyframes rotate {
 35 |   100% {
 36 |     transform: rotate(360deg);
 37 |     -webkit-transform: rotate(360deg);
 38 |   }
 39 | }
 40 | 
 41 | @-webkit-keyframes bounce {
 42 |   0%, 100% { -webkit-transform: scale(0.0) }
 43 |   50% { -webkit-transform: scale(1.0) }
 44 | }
 45 | 
 46 | @keyframes bounce {
 47 |   0%, 100% {
 48 |     transform: scale(0.0);
 49 |     -webkit-transform: scale(0.0);
 50 |   } 50% {
 51 |       transform: scale(1.0);
 52 |       -webkit-transform: scale(1.0);
 53 |     }
 54 | }
 55 | 
 56 | /* Circle spinner */
 57 | .spinning-dots-spinner {
 58 |   margin: 100px auto;
 59 |   width: 20px;
 60 |   height: 20px;
 61 |   position: relative;
 62 | }
 63 | 
 64 | .container1 > div, .container2 > div, .container3 > div {
 65 |   width: 6px;
 66 |   height: 6px;
 67 |   background-color: #333;
 68 | 
 69 |   border-radius: 100%;
 70 |   position: absolute;
 71 |   -webkit-animation: bouncedelay 1.2s infinite ease-in-out;
 72 |   animation: bouncedelay 1.2s infinite ease-in-out;
 73 |   /* Prevent first frame from flickering when animation starts */
 74 |   -webkit-animation-fill-mode: both;
 75 |   animation-fill-mode: both;
 76 | }
 77 | 
 78 | .spinning-dots-spinner .spinner-container {
 79 |   position: absolute;
 80 |   width: 100%;
 81 |   height: 100%;
 82 | }
 83 | 
 84 | .container2 {
 85 |   -webkit-transform: rotateZ(45deg);
 86 |   transform: rotateZ(45deg);
 87 | }
 88 | 
 89 | .container3 {
 90 |   -webkit-transform: rotateZ(90deg);
 91 |   transform: rotateZ(90deg);
 92 | }
 93 | 
 94 | .circle1 { top: 0; left: 0; }
 95 | .circle2 { top: 0; right: 0; }
 96 | .circle3 { right: 0; bottom: 0; }
 97 | .circle4 { left: 0; bottom: 0; }
 98 | 
 99 | .container2 .circle1 {
100 |   -webkit-animation-delay: -1.1s;
101 |   animation-delay: -1.1s;
102 | }
103 | 
104 | .container3 .circle1 {
105 |   -webkit-animation-delay: -1.0s;
106 |   animation-delay: -1.0s;
107 | }
108 | 
109 | .container1 .circle2 {
110 |   -webkit-animation-delay: -0.9s;
111 |   animation-delay: -0.9s;
112 | }
113 | 
114 | .container2 .circle2 {
115 |   -webkit-animation-delay: -0.8s;
116 |   animation-delay: -0.8s;
117 | }
118 | 
119 | .container3 .circle2 {
120 |   -webkit-animation-delay: -0.7s;
121 |   animation-delay: -0.7s;
122 | }
123 | 
124 | .container1 .circle3 {
125 |   -webkit-animation-delay: -0.6s;
126 |   animation-delay: -0.6s;
127 | }
128 | 
129 | .container2 .circle3 {
130 |   -webkit-animation-delay: -0.5s;
131 |   animation-delay: -0.5s;
132 | }
133 | 
134 | .container3 .circle3 {
135 |   -webkit-animation-delay: -0.4s;
136 |   animation-delay: -0.4s;
137 | }
138 | 
139 | .container1 .circle4 {
140 |   -webkit-animation-delay: -0.3s;
141 |   animation-delay: -0.3s;
142 | }
143 | 
144 | .container2 .circle4 {
145 |   -webkit-animation-delay: -0.2s;
146 |   animation-delay: -0.2s;
147 | }
148 | 
149 | .container3 .circle4 {
150 |   -webkit-animation-delay: -0.1s;
151 |   animation-delay: -0.1s;
152 | }
153 | 
154 | @-webkit-keyframes bouncedelay {
155 |   0%, 80%, 100% { -webkit-transform: scale(0.0) }
156 |   40% { -webkit-transform: scale(1.0) }
157 | }
158 | 
159 | @keyframes bouncedelay {
160 |   0%, 80%, 100% {
161 |     transform: scale(0.0);
162 |     -webkit-transform: scale(0.0);
163 |   } 40% {
164 |       transform: scale(1.0);
165 |       -webkit-transform: scale(1.0);
166 |     }
167 | }
168 | 
169 | /* Double bounce spinner */
170 | .double-bounce-spinner {
171 |   width: 40px;
172 |   height: 40px;
173 | 
174 |   position: relative;
175 |   margin: 100px auto;
176 | }
177 | 
178 | .double-bounce1, .double-bounce2 {
179 |   width: 100%;
180 |   height: 100%;
181 |   border-radius: 50%;
182 |   background-color: #333;
183 |   opacity: 0.6;
184 |   position: absolute;
185 |   top: 0;
186 |   left: 0;
187 | 
188 |   -webkit-animation: bounce 2.0s infinite ease-in-out;
189 |   animation: bounce 2.0s infinite ease-in-out;
190 | }
191 | 
192 | .double-bounce2 {
193 |   -webkit-animation-delay: -1.0s;
194 |   animation-delay: -1.0s;
195 | }
196 | 
197 | @-webkit-keyframes bounce {
198 |   0%, 100% { -webkit-transform: scale(0.0) }
199 |   50% { -webkit-transform: scale(1.0) }
200 | }
201 | 
202 | @keyframes bounce {
203 |   0%, 100% {
204 |     transform: scale(0.0);
205 |     -webkit-transform: scale(0.0);
206 |   } 50% {
207 |       transform: scale(1.0);
208 |       -webkit-transform: scale(1.0);
209 |     }
210 | }
211 | 
212 | /* Pulse spinner */
213 | .pulse-spinner {
214 |   width: 40px;
215 |   height: 40px;
216 |   margin: 100px auto;
217 |   background-color: #333;
218 | 
219 |   border-radius: 100%;
220 |   -webkit-animation: scaleout 1.0s infinite ease-in-out;
221 |   animation: scaleout 1.0s infinite ease-in-out;
222 | }
223 | 
224 | @-webkit-keyframes scaleout {
225 |   0% { -webkit-transform: scale(0.0) }
226 |   100% {
227 |     -webkit-transform: scale(1.0);
228 |     opacity: 0;
229 |   }
230 | }
231 | 
232 | @keyframes scaleout {
233 |   0% {
234 |     transform: scale(0.0);
235 |     -webkit-transform: scale(0.0);
236 |   } 100% {
237 |       transform: scale(1.0);
238 |       -webkit-transform: scale(1.0);
239 |       opacity: 0;
240 |     }
241 | }
242 | 
243 | /* Rotating plane spinner */
244 | .three-dots-row-spinner {
245 |   width: 30px;
246 |   height: 30px;
247 |   background-color: #333;
248 | 
249 |   margin: 100px auto;
250 |   -webkit-animation: rotateplane 1.2s infinite ease-in-out;
251 |   animation: rotateplane 1.2s infinite ease-in-out;
252 | }
253 | 
254 | @-webkit-keyframes rotateplane {
255 |   0% { -webkit-transform: perspective(120px) }
256 |   50% { -webkit-transform: perspective(120px) rotateY(180deg) }
257 |   100% { -webkit-transform: perspective(120px) rotateY(180deg)  rotateX(180deg) }
258 | }
259 | 
260 | @keyframes rotateplane {
261 |   0% {
262 |     transform: perspective(120px) rotateX(0deg) rotateY(0deg);
263 |     -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg)
264 |   } 50% {
265 |       transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
266 |       -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg)
267 |     } 100% {
268 |         transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
269 |         -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
270 |       }
271 | }
272 | 
273 | /* Wandering cubes spinner */
274 | .wandering-cubes-spinner {
275 |   margin: 100px auto;
276 |   width: 32px;
277 |   height: 32px;
278 |   position: relative;
279 | }
280 | 
281 | .wandering-cubes-spinner:before, .wandering-cubes-spinner:after {
282 |   content: '';
283 |   background-color: #333;
284 |   width: 10px;
285 |   height: 10px;
286 |   position: absolute;
287 |   top: 0;
288 |   left: 0;
289 | 
290 |   -webkit-animation: cubemove 1.8s infinite ease-in-out;
291 |   animation: cubemove 1.8s infinite ease-in-out;
292 | }
293 | 
294 | .wandering-cubes-spinner:after {
295 |   -webkit-animation-delay: -0.9s;
296 |   animation-delay: -0.9s;
297 | }
298 | 
299 | @-webkit-keyframes cubemove {
300 |   25% { -webkit-transform: translateX(22px) rotate(-90deg) scale(0.5) }
301 |   50% { -webkit-transform: translateX(22px) translateY(22px) rotate(-180deg) }
302 |   75% { -webkit-transform: translateX(0px) translateY(22px) rotate(-270deg) scale(0.5) }
303 |   100% { -webkit-transform: rotate(-360deg) }
304 | }
305 | 
306 | @keyframes cubemove {
307 |   25% {
308 |     transform: translateX(42px) rotate(-90deg) scale(0.5);
309 |     -webkit-transform: translateX(42px) rotate(-90deg) scale(0.5);
310 |   } 50% {
311 |       /* Hack to make FF rotate in the right direction */
312 |       transform: translateX(42px) translateY(42px) rotate(-179deg);
313 |       -webkit-transform: translateX(42px) translateY(42px) rotate(-179deg);
314 |     } 50.1% {
315 |         transform: translateX(42px) translateY(42px) rotate(-180deg);
316 |         -webkit-transform: translateX(42px) translateY(42px) rotate(-180deg);
317 |       } 75% {
318 |           transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5);
319 |           -webkit-transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5);
320 |         } 100% {
321 |             transform: rotate(-360deg);
322 |             -webkit-transform: rotate(-360deg);
323 |           }
324 | }
325 | 
326 | /* Wave spinner */
327 | .wave-spinner {
328 |   margin: 100px auto;
329 |   width: 50px;
330 |   height: 30px;
331 |   text-align: center;
332 |   font-size: 10px;
333 | }
334 | 
335 | .wave-spinner > div {
336 |   background-color: #333;
337 |   height: 100%;
338 |   width: 6px;
339 |   display: inline-block;
340 | 
341 |   -webkit-animation: stretchdelay 1.2s infinite ease-in-out;
342 |   animation: stretchdelay 1.2s infinite ease-in-out;
343 | }
344 | 
345 | .wave-spinner .rect2 {
346 |   -webkit-animation-delay: -1.1s;
347 |   animation-delay: -1.1s;
348 | }
349 | 
350 | .wave-spinner .rect3 {
351 |   -webkit-animation-delay: -1.0s;
352 |   animation-delay: -1.0s;
353 | }
354 | 
355 | .wave-spinner .rect4 {
356 |   -webkit-animation-delay: -0.9s;
357 |   animation-delay: -0.9s;
358 | }
359 | 
360 | .wave-spinner .rect5 {
361 |   -webkit-animation-delay: -0.8s;
362 |   animation-delay: -0.8s;
363 | }
364 | 
365 | @-webkit-keyframes stretchdelay {
366 |   0%, 40%, 100% { -webkit-transform: scaleY(0.4) }
367 |   20% { -webkit-transform: scaleY(1.0) }
368 | }
369 | 
370 | @keyframes stretchdelay {
371 |   0%, 40%, 100% {
372 |     transform: scaleY(0.4);
373 |     -webkit-transform: scaleY(0.4);
374 |   }  20% {
375 |        transform: scaleY(1.0);
376 |        -webkit-transform: scaleY(1.0);
377 |      }
378 | }
379 | 
380 | /* Three bounce spinner */
381 | .three-bounce-spinner {
382 |   margin: 100px auto 0;
383 |   width: 70px;
384 |   text-align: center;
385 | }
386 | 
387 | .three-bounce-spinner > div {
388 |   width: 18px;
389 |   height: 18px;
390 |   background-color: #333;
391 | 
392 |   border-radius: 100%;
393 |   display: inline-block;
394 |   -webkit-animation: bouncedelay 1.4s infinite ease-in-out both;
395 |   animation: bouncedelay 1.4s infinite ease-in-out both;
396 | }
397 | 
398 | .three-bounce-spinner .bounce1 {
399 |   -webkit-animation-delay: -0.32s;
400 |   animation-delay: -0.32s;
401 | }
402 | 
403 | .three-bounce-spinner .bounce2 {
404 |   -webkit-animation-delay: -0.16s;
405 |   animation-delay: -0.16s;
406 | }
407 | 
408 | @-webkit-keyframes bouncedelay {
409 |   0%, 80%, 100% { -webkit-transform: scale(0.0) }
410 |   40% { -webkit-transform: scale(1.0) }
411 | }
412 | 
413 | @keyframes bouncedelay {
414 |   0%, 80%, 100% {
415 |     transform: scale(0.0);
416 |     -webkit-transform: scale(0.0);
417 |   } 40% {
418 |       transform: scale(1.0);
419 |       -webkit-transform: scale(1.0);
420 |     }
421 | }
422 | 
423 | /* Cube grid spinner */
424 | .cube-grid-spinner {
425 |   width:30px;
426 |   height:30px;
427 |   margin:100px auto;
428 | }
429 | 
430 | .cube {
431 |   width:33%;
432 |   height:33%;
433 |   background:#333;
434 |   float:left;
435 |   -webkit-animation: scaleDelay 1.3s infinite ease-in-out;
436 |   animation: scaleDelay 1.3s infinite ease-in-out;
437 | }
438 | 
439 | /*
440 |  * Spinner positions
441 |  * 1 2 3
442 |  * 4 5 6
443 |  * 7 8 9
444 |  */
445 | 
446 | .cube-grid-spinner .cube:nth-child(1) { -webkit-animation-delay: 0.2s; animation-delay: 0.2s  }
447 | .cube-grid-spinner .cube:nth-child(2) { -webkit-animation-delay: 0.3s; animation-delay: 0.3s  }
448 | .cube-grid-spinner .cube:nth-child(3) { -webkit-animation-delay: 0.4s; animation-delay: 0.4s  }
449 | .cube-grid-spinner .cube:nth-child(4) { -webkit-animation-delay: 0.1s; animation-delay: 0.1s  }
450 | .cube-grid-spinner .cube:nth-child(5) { -webkit-animation-delay: 0.2s; animation-delay: 0.2s  }
451 | .cube-grid-spinner .cube:nth-child(6) { -webkit-animation-delay: 0.3s; animation-delay: 0.3s  }
452 | .cube-grid-spinner .cube:nth-child(7) { -webkit-animation-delay: 0.0s; animation-delay: 0.0s  }
453 | .cube-grid-spinner .cube:nth-child(8) { -webkit-animation-delay: 0.1s; animation-delay: 0.1s  }
454 | .cube-grid-spinner .cube:nth-child(9) { -webkit-animation-delay: 0.2s; animation-delay: 0.2s  }
455 | 
456 | @-webkit-keyframes scaleDelay {
457 |   0%, 70%, 100% { -webkit-transform:scale3D(1.0, 1.0, 1.0) }
458 |   35%           { -webkit-transform:scale3D(0.0, 0.0, 1.0) }
459 | }
460 | 
461 | @keyframes scaleDelay {
462 |   0%, 70%, 100% { -webkit-transform:scale3D(1.0, 1.0, 1.0); transform:scale3D(1.0, 1.0, 1.0) }
463 |   35%           { -webkit-transform:scale3D(1.0, 1.0, 1.0); transform:scale3D(0.0, 0.0, 1.0) }
464 | }
465 | 
466 | /* Word press spinner */
467 | .word-press-spinner {
468 |   background: #333;
469 |   width: 30px;
470 |   height: 30px;
471 |   display: inline-block;
472 |   border-radius: 30px;
473 |   position: relative;
474 |   -webkit-animation: inner-circle 1s linear infinite;
475 |   animation: inner-circle 1s linear infinite;
476 | }
477 | 
478 | .inner-circle {
479 |   display: block;
480 |   background: #fff;
481 |   width: 8px;
482 |   height: 8px;
483 |   position: absolute;
484 |   border-radius: 8px;
485 |   top: 5px;
486 |   left: 5px;
487 | }
488 | 
489 | @-webkit-keyframes inner-circle {
490 |   0% { -webkit-transform: rotate(0); }
491 |   100% { -webkit-transform: rotate(360deg); }
492 | }
493 | @keyframes inner-circle {
494 |   0% { transform: rotate(0); -webkit-transform:rotate(0); }
495 |   100% { transform: rotate(360deg); -webkit-transform:rotate(360deg); }
496 | }
497 | 
498 | /* Fading circle spinner */
499 | .fading-circle-spinner {
500 |   margin: 100px auto;
501 |   width: 22px;
502 |   height: 22px;
503 |   position: relative;
504 | }
505 | 
506 | .fading-circle {
507 |   width: 100%;
508 |   height: 100%;
509 |   position: absolute;
510 |   left: 0;
511 |   top: 0;
512 | }
513 | 
514 | .fading-circle:before {
515 |   content: '';
516 |   display: block;
517 |   margin: 0 auto;
518 |   width: 18%;
519 |   height: 18%;
520 |   background-color: #333;
521 | 
522 |   border-radius: 100%;
523 |   -webkit-animation: fadedelay 1.2s infinite ease-in-out both;
524 |   animation: fadedelay 1.2s infinite ease-in-out both;
525 | }
526 | 
527 | .fading-circle2  { transform: rotate(30deg);  -webkit-transform: rotate(30deg)  }
528 | .fading-circle3  { transform: rotate(60deg);  -webkit-transform: rotate(60deg)  }
529 | .fading-circle4  { transform: rotate(90deg);  -webkit-transform: rotate(90deg)  }
530 | .fading-circle5  { transform: rotate(120deg); -webkit-transform: rotate(120deg) }
531 | .fading-circle6  { transform: rotate(150deg); -webkit-transform: rotate(150deg) }
532 | .fading-circle7  { transform: rotate(180deg); -webkit-transform: rotate(180deg) }
533 | .fading-circle8  { transform: rotate(210deg); -webkit-transform: rotate(210deg) }
534 | .fading-circle9  { transform: rotate(240deg); -webkit-transform: rotate(240deg) }
535 | .fading-circle10 { transform: rotate(270deg); -webkit-transform: rotate(270deg) }
536 | .fading-circle11 { transform: rotate(300deg); -webkit-transform: rotate(300deg) }
537 | .fading-circle12 { transform: rotate(330deg); -webkit-transform: rotate(330deg) }
538 | 
539 | .fading-circle2:before  { animation-delay: -1.1s; -webkit-animation-delay: -1.1s }
540 | .fading-circle3:before  { animation-delay: -1.0s; -webkit-animation-delay: -1.0s }
541 | .fading-circle4:before  { animation-delay: -0.9s; -webkit-animation-delay: -0.9s }
542 | .fading-circle5:before  { animation-delay: -0.8s; -webkit-animation-delay: -0.8s }
543 | .fading-circle6:before  { animation-delay: -0.7s; -webkit-animation-delay: -0.7s }
544 | .fading-circle7:before  { animation-delay: -0.6s; -webkit-animation-delay: -0.6s }
545 | .fading-circle8:before  { animation-delay: -0.5s; -webkit-animation-delay: -0.5s }
546 | .fading-circle9:before  { animation-delay: -0.4s; -webkit-animation-delay: -0.4s }
547 | .fading-circle10:before { animation-delay: -0.3s; -webkit-animation-delay: -0.3s }
548 | .fading-circle11:before { animation-delay: -0.2s; -webkit-animation-delay: -0.2s }
549 | .fading-circle12:before { animation-delay: -0.1s; -webkit-animation-delay: -0.1s }
550 | 
551 | @-webkit-keyframes fadedelay {
552 |   0%, 39%, 100% { opacity: 0 }
553 |   40% { opacity: 1 }
554 | }
555 | 
556 | @keyframes fadedelay {
557 |   0%, 39%, 100% { opacity: 0 }
558 |   40% { opacity: 1 }
559 | }


--------------------------------------------------------------------------------
/src/angular-spinkit.js:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * angular-spinkit module
  3 |  * SpinKit (https://github.com/tobiasahlin/SpinKit) spinners for AngularJS
  4 |  *
  5 |  * Author: Urigo - https://github.com/Urigo
  6 |  */
  7 | 'use strict';
  8 | 
  9 | angular.module('angular-spinkit',
 10 |   [
 11 |     'ngRotatingPlaneSpinner',
 12 |     'ngDoubleBounceSpinner',
 13 |     'ngWaveSpinner',
 14 |     'ngWanderingCubesSpinner',
 15 |     'ngPulseSpinner',
 16 |     'ngChasingDotsSpinner',
 17 |     'ngCircleSpinner',
 18 |     'ngThreeBounceSpinner',
 19 |     'ngCubeGridSpinner',
 20 |     'ngWordPressSpinner',
 21 |     'ngFadingCircleSpinner',
 22 |     'ngSpinkitImagePreloader'
 23 |   ]);
 24 | 
 25 | angular.module('ngRotatingPlaneSpinner', []).directive('rotatingPlaneSpinner', function () {
 26 |   return {
 27 |     restrict: 'E',
 28 |     templateUrl: 'src/templates/rotatingPlaneSpinner.html'
 29 |   };
 30 | });
 31 | 
 32 | angular.module('ngDoubleBounceSpinner', []).directive('doubleBounceSpinner', function () {
 33 |   return {
 34 |     restrict: 'E',
 35 |     templateUrl: 'src/templates/doubleBounceSpinner.html'
 36 |   };
 37 | });
 38 | 
 39 | angular.module('ngWaveSpinner', []).directive('waveSpinner', function () {
 40 |   return {
 41 |     restrict: 'E',
 42 |     templateUrl: 'src/templates/waveSpinner.html'
 43 |   };
 44 | });
 45 | 
 46 | angular.module('ngWanderingCubesSpinner', []).directive('wanderingCubesSpinner', function () {
 47 |   return {
 48 |     restrict: 'E',
 49 |     templateUrl: 'src/templates/wanderingCubesSpinner.html'
 50 |   };
 51 | });
 52 | 
 53 | angular.module('ngPulseSpinner', []).directive('pulseSpinner', function () {
 54 |   return {
 55 |     restrict: 'E',
 56 |     templateUrl: 'src/templates/pulseSpinner.html'
 57 |   };
 58 | });
 59 | 
 60 | angular.module('ngChasingDotsSpinner', []).directive('chasingDotsSpinner', function () {
 61 |   return {
 62 |     restrict: 'E',
 63 |     templateUrl: 'src/templates/chasingDotsSpinner.html'
 64 |   };
 65 | });
 66 | 
 67 | angular.module('ngCircleSpinner', []).directive('circleSpinner', function () {
 68 |   return {
 69 |     restrict: 'E',
 70 |     templateUrl: 'src/templates/circleSpinner.html'
 71 |   };
 72 | });
 73 | 
 74 | angular.module('ngThreeBounceSpinner', []).directive('threeBounceSpinner', function () {
 75 |   return {
 76 |     restrict: 'E',
 77 |     templateUrl: 'src/templates/threeBounceSpinner.html'
 78 |   };
 79 | });
 80 | 
 81 | angular.module('ngCubeGridSpinner', []).directive('cubeGridSpinner', function () {
 82 |   return {
 83 |     restrict: 'E',
 84 |     templateUrl: 'src/templates/cubeGridSpinner.html'
 85 |   };
 86 | });
 87 | 
 88 | angular.module('ngWordPressSpinner', []).directive('wordPressSpinner', function () {
 89 |   return {
 90 |     restrict: 'E',
 91 |     templateUrl: 'src/templates/wordPressSpinner.html'
 92 |   };
 93 | });
 94 | 
 95 | angular.module('ngFadingCircleSpinner', []).directive('fadingCircleSpinner', function () {
 96 |   return {
 97 |     restrict: 'E',
 98 |     templateUrl: 'src/templates/fadingCircleSpinner.html'
 99 |   };
100 | });
101 | 
102 | angular.module('ngSpinkitImagePreloader', []).directive('spinkitImagePreloader', ['$compile', '$injector', '$rootScope', function ($compile, $injector, $rootScope) {
103 |   return {
104 |     restrict: 'A',
105 |     scope: {
106 |       ngSrc: '@',
107 |       spinkitImagePreloader: '@',
108 |       spinkitImagePreloaderClass: '@'
109 |     },
110 |     link: function(scope, element, attrs) {
111 |       var spinnerWrapper,
112 |           spinnerWrapperClass = scope.spinkitImagePreloaderClass || 'spinner-wrapper',
113 |           spinner;
114 | 
115 |       // Check for the existence of the spinkit-directive
116 |       if(!$injector.has(attrs.$normalize(scope.spinkitImagePreloader) + 'Directive'))
117 |         return;
118 | 
119 |       // Create and configure DOM-spinner-elements
120 |       spinnerWrapper = angular.element('<div/>').addClass(spinnerWrapperClass),
121 |       spinner = $compile('<' + scope.spinkitImagePreloader + '/>')(scope);
122 |       spinnerWrapper.append(spinner);
123 |       spinnerWrapper.css('overflow', 'hidden');
124 | 
125 |       element.after(spinnerWrapper);
126 | 
127 |       // Copy dimensions (inline and attributes) from the image to the spinner wrapper
128 |       if(element.css('width'))
129 |         spinnerWrapper.css('width', element.css('width'));
130 | 
131 |       if(attrs.width)
132 |         spinnerWrapper.css('width', attrs.width + 'px');
133 | 
134 |       if(element.css('height'))
135 |         spinnerWrapper.css('height', element.css('height'));
136 | 
137 |       if(attrs.height)
138 |         spinnerWrapper.css('height', attrs.height + 'px');
139 | 
140 |       element.on('load', function () {
141 |         spinnerWrapper.css('display', 'none');
142 |         element.css('display', 'block');
143 |         $rootScope.$broadcast('angular-spinkit:imageLoaded');
144 |       });
145 | 
146 |       scope.$watch('ngSrc', function () {
147 |         spinnerWrapper.css('display', 'block');
148 |         element.css('display', 'none');
149 |       });
150 |     }
151 |   };
152 | }]);


--------------------------------------------------------------------------------
/src/templates/chasingDotsSpinner.html:
--------------------------------------------------------------------------------
1 | <div class="chasing-dots-spinner">
2 |   <div class="dot1"></div>
3 |   <div class="dot2"></div>
4 | </div>
5 | 


--------------------------------------------------------------------------------
/src/templates/circleSpinner.html:
--------------------------------------------------------------------------------
 1 | <div class="spinning-dots-spinner">
 2 |   <div class="spinner-container container1">
 3 |     <div class="circle1"></div>
 4 |     <div class="circle2"></div>
 5 |     <div class="circle3"></div>
 6 |     <div class="circle4"></div>
 7 |   </div>
 8 |   <div class="spinner-container container2">
 9 |     <div class="circle1"></div>
10 |     <div class="circle2"></div>
11 |     <div class="circle3"></div>
12 |     <div class="circle4"></div>
13 |   </div>
14 |   <div class="spinner-container container3">
15 |     <div class="circle1"></div>
16 |     <div class="circle2"></div>
17 |     <div class="circle3"></div>
18 |     <div class="circle4"></div>
19 |   </div>
20 | </div>
21 | 


--------------------------------------------------------------------------------
/src/templates/cubeGridSpinner.html:
--------------------------------------------------------------------------------
 1 | <div class="cube-grid-spinner">
 2 |   <div class="cube"></div>
 3 |   <div class="cube"></div>
 4 |   <div class="cube"></div>
 5 |   <div class="cube"></div>
 6 |   <div class="cube"></div>
 7 |   <div class="cube"></div>
 8 |   <div class="cube"></div>
 9 |   <div class="cube"></div>
10 |   <div class="cube"></div>
11 | </div>


--------------------------------------------------------------------------------
/src/templates/doubleBounceSpinner.html:
--------------------------------------------------------------------------------
1 | <div class="double-bounce-spinner">
2 |   <div class="double-bounce1"></div>
3 |   <div class="double-bounce2"></div>
4 | </div>
5 | 


--------------------------------------------------------------------------------
/src/templates/fadingCircleSpinner.html:
--------------------------------------------------------------------------------
 1 | <div class="fading-circle-spinner">
 2 |   <div class="fading-circle1 fading-circle"></div>
 3 |   <div class="fading-circle2 fading-circle"></div>
 4 |   <div class="fading-circle3 fading-circle"></div>
 5 |   <div class="fading-circle4 fading-circle"></div>
 6 |   <div class="fading-circle5 fading-circle"></div>
 7 |   <div class="fading-circle6 fading-circle"></div>
 8 |   <div class="fading-circle7 fading-circle"></div>
 9 |   <div class="fading-circle8 fading-circle"></div>
10 |   <div class="fading-circle9 fading-circle"></div>
11 |   <div class="fading-circle10 fading-circle"></div>
12 |   <div class="fading-circle11 fading-circle"></div>
13 |   <div class="fading-circle12 fading-circle"></div>
14 | </div>


--------------------------------------------------------------------------------
/src/templates/pulseSpinner.html:
--------------------------------------------------------------------------------
1 | <div class="pulse-spinner"></div>
2 | 


--------------------------------------------------------------------------------
/src/templates/rotatingPlaneSpinner.html:
--------------------------------------------------------------------------------
1 | <div class="three-dots-row-spinner"></div>
2 | 


--------------------------------------------------------------------------------
/src/templates/threeBounceSpinner.html:
--------------------------------------------------------------------------------
1 | <div class="three-bounce-spinner">
2 |   <div class="bounce1"></div>
3 |   <div class="bounce2"></div>
4 |   <div class="bounce3"></div>
5 | </div>


--------------------------------------------------------------------------------
/src/templates/wanderingCubesSpinner.html:
--------------------------------------------------------------------------------
1 | <div class="wandering-cubes-spinner"></div>
2 | 


--------------------------------------------------------------------------------
/src/templates/waveSpinner.html:
--------------------------------------------------------------------------------
1 | <div class="wave-spinner">
2 |   <div class="rect1"></div>
3 |   <div class="rect2"></div>
4 |   <div class="rect3"></div>
5 |   <div class="rect4"></div>
6 |   <div class="rect5"></div>
7 | </div>
8 | 


--------------------------------------------------------------------------------
/src/templates/wordPressSpinner.html:
--------------------------------------------------------------------------------
1 | <div class="word-press-spinner">
2 |   <span class="inner-circle"></span>
3 | </div>


--------------------------------------------------------------------------------