├── .gitignore
├── src
├── templates
│ ├── pulseSpinner.html
│ ├── rotatingPlaneSpinner.html
│ ├── wanderingCubesSpinner.html
│ ├── wordPressSpinner.html
│ ├── chasingDotsSpinner.html
│ ├── doubleBounceSpinner.html
│ ├── threeBounceSpinner.html
│ ├── waveSpinner.html
│ ├── cubeGridSpinner.html
│ ├── circleSpinner.html
│ └── fadingCircleSpinner.html
├── angular-spinkit.js
└── angular-spinkit.css
├── package.json
├── bower.json
├── LICENSE.md
├── gruntfile.js
└── README.md
/.gitignore:
--------------------------------------------------------------------------------
1 | .idea
2 | node_modules
3 |
4 |
--------------------------------------------------------------------------------
/src/templates/pulseSpinner.html:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/src/templates/rotatingPlaneSpinner.html:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/src/templates/wanderingCubesSpinner.html:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/src/templates/wordPressSpinner.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
--------------------------------------------------------------------------------
/src/templates/chasingDotsSpinner.html:
--------------------------------------------------------------------------------
1 |
5 |
--------------------------------------------------------------------------------
/src/templates/doubleBounceSpinner.html:
--------------------------------------------------------------------------------
1 |
5 |
--------------------------------------------------------------------------------
/src/templates/threeBounceSpinner.html:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/templates/waveSpinner.html:
--------------------------------------------------------------------------------
1 |
8 |
--------------------------------------------------------------------------------
/src/templates/cubeGridSpinner.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
![Your description]()
47 | ![Your escription]()
48 |
49 |
50 | ![Your description]()
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 |
--------------------------------------------------------------------------------
/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('').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/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 | }
--------------------------------------------------------------------------------