├── .gitignore
├── .ruby-version
├── CNAME
├── CONTRIBUTING.md
├── Gulpfile.js
├── LICENSE
├── README.md
├── Rakefile
├── bower.json
├── css
    ├── spinner
    │   ├── atebits.css
    │   ├── ball.css
    │   ├── circles.css
    │   ├── dots.css
    │   ├── echo.css
    │   ├── flower.css
    │   ├── gauge.css
    │   ├── heartbeat.css
    │   ├── hexdots.css
    │   ├── hole-pulse.css
    │   ├── inner-circles.css
    │   ├── plus-loader.css
    │   ├── plus.css
    │   ├── pong.css
    │   ├── pulse.css
    │   ├── refreshing.css
    │   ├── spinner.css
    │   ├── spinning-pixels.css
    │   ├── three-quarters.css
    │   ├── throbber.css
    │   ├── timer.css
    │   ├── whirly.css
    │   └── wobblebar.css
    └── spinners.css
├── index.html
├── package.json
├── sache.json
└── sass
    ├── spinner
        ├── atebits.scss
        ├── ball.scss
        ├── circles.scss
        ├── dots.scss
        ├── echo.scss
        ├── flower.scss
        ├── gauge.scss
        ├── heartbeat.scss
        ├── hexdots.scss
        ├── inner-circles.scss
        ├── plus.scss
        ├── pong.scss
        ├── pulse.scss
        ├── refreshing.scss
        ├── spinner.scss
        ├── spinning-pixels.scss
        ├── three-quarters.scss
        ├── throbber.scss
        ├── timer.scss
        ├── whirly.scss
        └── wobblebar.scss
    └── spinners.scss


/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | *.tmproj
 3 | tmtags
 4 | *~
 5 | \#*
 6 | .\#*
 7 | *.swp
 8 | coverage
 9 | rdoc
10 | pkg
11 | .bundle
12 | .sass-cache/**/*
13 | junk/*
14 | node_modules/
15 | 


--------------------------------------------------------------------------------
/.ruby-version:
--------------------------------------------------------------------------------
1 | ruby-2.1.1
2 | 


--------------------------------------------------------------------------------
/CNAME:
--------------------------------------------------------------------------------
1 | www.css-spinners.com


--------------------------------------------------------------------------------
/CONTRIBUTING.md:
--------------------------------------------------------------------------------
 1 | # Contributions
 2 | 
 3 | Contributions are encouraged! To contribute:
 4 | 
 5 | 1. Fork this repository
 6 | 2. Choose a unique class name for your loading indicator that ends in "-loader"
 7 | 3. Create a couple of variables in the Sass code to customize your spinner (don't forget to add "!default" after the variable definition)
 8 | 4. Commit your changes to your fork
 9 | 5. Create a pull request!
10 | 
11 | All contributions will be licensed under the [MIT license](LICENSE) associated with this project. By submitting a pull-request you acknowledge that you are contributing code that you wrote or code that is in the public domain and you further yield any claim to copyright to the copyright holders of this repository.
12 | 


--------------------------------------------------------------------------------
/Gulpfile.js:
--------------------------------------------------------------------------------
 1 | var gulp = require('gulp')
 2 | ,   sass = require('gulp-ruby-sass')
 3 | ;
 4 | 
 5 | gulp.task('css', function() {
 6 |   return sass('sass/', {style: 'expanded', compass: true})
 7 |     .pipe(gulp.dest('css'));
 8 | });
 9 | 
10 | gulp.task('watch', function() {
11 |   gulp.watch('sass/**/*.scss', ['css']);
12 | });
13 | 


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


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | CSS Spinners
  2 | ===========
  3 | 
  4 | Simple CSS loading indicators made with CSS and minimal HTML markup.
  5 | 
  6 | ![screenshot](http://f.cl.ly/items/033Q0Q202X430L1S2Z0A/css-spinners.png)
  7 | 
  8 | All loading indicators are designed to be used with minimal markup:
  9 | 
 10 | ```html
 11 | <div class="loading-indicator">
 12 | 	Loading...
 13 | </div>
 14 | ```
 15 | 
 16 | Simply replace "loading-indicator" with the class name of your choice.
 17 | 
 18 | Markup
 19 | ------
 20 | 
 21 | To use a specific loading indicator link the appropriate file:
 22 | 
 23 | ```html
 24 | <link rel="stylesheet" href="css/spinner/throbber.css">
 25 | ```
 26 | 
 27 | Or, if you'd like to have access to the entire library of spinners you can link the root file:
 28 | 
 29 | ```html
 30 | <link rel="stylesheet" href="css/spinners.css">
 31 | ```
 32 | 
 33 | Then apply the appropriate [class name](#class-names) for the spinner of your choice to the markup:
 34 | 
 35 | ```html
 36 | <div class="throbber-loader">
 37 | 	Loading...
 38 | </div>
 39 | ```
 40 | 
 41 | Class names
 42 | -----------
 43 | 
 44 | The full list of loading indicator class names are shown below. To see them in action, visit http://css-spinners.com/.
 45 | 
 46 | | Class                  | Description                                                    |
 47 | | ---------------------- | -------------------------------------------------------------- |
 48 | | .spinner-loader        | Spinning circles.                                              |
 49 | | .throbber-loader       | Animated Facebook-like throbber.                               |
 50 | | .refreshing-loader     | Circular spinning arrow. Great for refreshing content.         |
 51 | | .heartbeat-loader      | Animated beating heart.                                        |
 52 | | .gauge-loader          | Animated speedometer-like gauge with rotating needle.          |
 53 | | .three-quarters-loader | Minimal three-quarters donut spinner.                          |
 54 | | .wobblebar-loader      | Animated wobbling progress bar.                                |
 55 | | .atebits-loader        | Staight out of Letterpress, an animated rotating Atebits logo. |
 56 | | .whirly-loader         | A comet-like rotating spinner.                                 |
 57 | | .flower-loader         | An animated spinning flower.                                   |
 58 | | .dots-loader           | Almost a rotating shell game. With dots!                       |
 59 | | .circles-loader        | Three rotating multi-colored circles.                          |
 60 | | .plus-loader           | Animated Google Plus-like loader.                              |
 61 | | .ball-loader           | A bouncing ball.                                               |
 62 | | .hexdots-loader        | Similar to the dots animation, but with six!                   |
 63 | | .inner-circles-loader  | A filling circle with other circles                            |
 64 | | .pong-loader           | Retro tennis-like game simulation from the 70s.                |
 65 | | .pulse-loader          | A pulsing circle. Shrinking and enlarging.					  |					  
 66 | | .spinning-pixels-loader| A spinning pixelated loader.             					  |					  | .echo-loader           | A Growing circle that fade-in-out.                              |
 67 | 
 68 | 
 69 | Customize with Sass
 70 | -------------------
 71 | 
 72 | Many of the spinners in this collection can be customized by tweaking variables included in the Sass [source files](sass/spinner).
 73 | 
 74 | 
 75 | Install with Bower
 76 | ------------------
 77 | 
 78 | You can install CSS Spinners with the following command, like any other [Bower](http://bower.io/) project:
 79 | 
 80 |     $ bower install css-spinners
 81 | 
 82 | CSS is available in the `css/` directory and Sass in the `sass/` directory.
 83 | 
 84 | 
 85 | Contributions
 86 | -------------
 87 | 
 88 | Contributions are welcome! See [CONTRIBUTING.md](CONTRIBUTING.md) for details.
 89 | 
 90 | 
 91 | License
 92 | -------
 93 | 
 94 | CSS Spinners is freely available under the MIT License. See [LICENSE](LICENSE) file for details.
 95 | 
 96 | 
 97 | Adaptations
 98 | -----------
 99 | 
100 | [React components](https://github.com/ajwann/css-spinners-react) by Adam Wanninger
101 | 


--------------------------------------------------------------------------------
/Rakefile:
--------------------------------------------------------------------------------
 1 | desc "compile stylesheets"
 2 | task :compile do
 3 |   sh "bundle exec compass compile"
 4 | end
 5 | 
 6 | desc "watch for changes to Sass source files and recompile"
 7 | task :watch do
 8 |   sh "bundle exec compass watch"
 9 | end
10 | 
11 | task :default => :compile
12 | 


--------------------------------------------------------------------------------
/bower.json:
--------------------------------------------------------------------------------
1 | {
2 |   "name": "css-spinners",
3 |   "version": "2.2.0",
4 |   "main": ["./css/spinners.css", "./css/spinner/*.css", "./sass/spinners.sass", "./sass/*.scss"],
5 |   "ignore": [ "**/.*" ]
6 | }
7 | 


--------------------------------------------------------------------------------
/css/spinner/atebits.css:
--------------------------------------------------------------------------------
  1 | @-moz-keyframes atebits-loader {
  2 |   0% {
  3 |     -moz-transform: rotate(0deg);
  4 |     transform: rotate(0deg);
  5 |   }
  6 |   3% {
  7 |     -moz-transform: rotate(90deg);
  8 |     transform: rotate(90deg);
  9 |   }
 10 |   10% {
 11 |     -moz-transform: rotate(90deg);
 12 |     transform: rotate(90deg);
 13 |   }
 14 |   13% {
 15 |     -moz-transform: rotate(180deg);
 16 |     transform: rotate(180deg);
 17 |   }
 18 |   20% {
 19 |     -moz-transform: rotate(180deg);
 20 |     transform: rotate(180deg);
 21 |   }
 22 |   23% {
 23 |     -moz-transform: rotate(90deg);
 24 |     transform: rotate(90deg);
 25 |   }
 26 |   30% {
 27 |     -moz-transform: rotate(90deg);
 28 |     transform: rotate(90deg);
 29 |   }
 30 |   33% {
 31 |     -moz-transform: rotate(180deg);
 32 |     transform: rotate(180deg);
 33 |   }
 34 |   40% {
 35 |     -moz-transform: rotate(180deg);
 36 |     transform: rotate(180deg);
 37 |   }
 38 |   43% {
 39 |     -moz-transform: rotate(270deg);
 40 |     transform: rotate(270deg);
 41 |   }
 42 |   50% {
 43 |     -moz-transform: rotate(270deg);
 44 |     transform: rotate(270deg);
 45 |   }
 46 |   53% {
 47 |     -moz-transform: rotate(180deg);
 48 |     transform: rotate(180deg);
 49 |   }
 50 |   60% {
 51 |     -moz-transform: rotate(180deg);
 52 |     transform: rotate(180deg);
 53 |   }
 54 |   63% {
 55 |     -moz-transform: rotate(90deg);
 56 |     transform: rotate(90deg);
 57 |   }
 58 |   70% {
 59 |     -moz-transform: rotate(90deg);
 60 |     transform: rotate(90deg);
 61 |   }
 62 |   73% {
 63 |     -moz-transform: rotate(0deg);
 64 |     transform: rotate(0deg);
 65 |   }
 66 |   80% {
 67 |     -moz-transform: rotate(0deg);
 68 |     transform: rotate(0deg);
 69 |   }
 70 |   83% {
 71 |     -moz-transform: rotate(-90deg);
 72 |     transform: rotate(-90deg);
 73 |   }
 74 |   90% {
 75 |     -moz-transform: rotate(-90deg);
 76 |     transform: rotate(-90deg);
 77 |   }
 78 |   93% {
 79 |     -moz-transform: rotate(0deg);
 80 |     transform: rotate(0deg);
 81 |   }
 82 | }
 83 | @-webkit-keyframes atebits-loader {
 84 |   0% {
 85 |     -webkit-transform: rotate(0deg);
 86 |     transform: rotate(0deg);
 87 |   }
 88 |   3% {
 89 |     -webkit-transform: rotate(90deg);
 90 |     transform: rotate(90deg);
 91 |   }
 92 |   10% {
 93 |     -webkit-transform: rotate(90deg);
 94 |     transform: rotate(90deg);
 95 |   }
 96 |   13% {
 97 |     -webkit-transform: rotate(180deg);
 98 |     transform: rotate(180deg);
 99 |   }
100 |   20% {
101 |     -webkit-transform: rotate(180deg);
102 |     transform: rotate(180deg);
103 |   }
104 |   23% {
105 |     -webkit-transform: rotate(90deg);
106 |     transform: rotate(90deg);
107 |   }
108 |   30% {
109 |     -webkit-transform: rotate(90deg);
110 |     transform: rotate(90deg);
111 |   }
112 |   33% {
113 |     -webkit-transform: rotate(180deg);
114 |     transform: rotate(180deg);
115 |   }
116 |   40% {
117 |     -webkit-transform: rotate(180deg);
118 |     transform: rotate(180deg);
119 |   }
120 |   43% {
121 |     -webkit-transform: rotate(270deg);
122 |     transform: rotate(270deg);
123 |   }
124 |   50% {
125 |     -webkit-transform: rotate(270deg);
126 |     transform: rotate(270deg);
127 |   }
128 |   53% {
129 |     -webkit-transform: rotate(180deg);
130 |     transform: rotate(180deg);
131 |   }
132 |   60% {
133 |     -webkit-transform: rotate(180deg);
134 |     transform: rotate(180deg);
135 |   }
136 |   63% {
137 |     -webkit-transform: rotate(90deg);
138 |     transform: rotate(90deg);
139 |   }
140 |   70% {
141 |     -webkit-transform: rotate(90deg);
142 |     transform: rotate(90deg);
143 |   }
144 |   73% {
145 |     -webkit-transform: rotate(0deg);
146 |     transform: rotate(0deg);
147 |   }
148 |   80% {
149 |     -webkit-transform: rotate(0deg);
150 |     transform: rotate(0deg);
151 |   }
152 |   83% {
153 |     -webkit-transform: rotate(-90deg);
154 |     transform: rotate(-90deg);
155 |   }
156 |   90% {
157 |     -webkit-transform: rotate(-90deg);
158 |     transform: rotate(-90deg);
159 |   }
160 |   93% {
161 |     -webkit-transform: rotate(0deg);
162 |     transform: rotate(0deg);
163 |   }
164 | }
165 | @keyframes atebits-loader {
166 |   0% {
167 |     -moz-transform: rotate(0deg);
168 |     -ms-transform: rotate(0deg);
169 |     -webkit-transform: rotate(0deg);
170 |     transform: rotate(0deg);
171 |   }
172 |   3% {
173 |     -moz-transform: rotate(90deg);
174 |     -ms-transform: rotate(90deg);
175 |     -webkit-transform: rotate(90deg);
176 |     transform: rotate(90deg);
177 |   }
178 |   10% {
179 |     -moz-transform: rotate(90deg);
180 |     -ms-transform: rotate(90deg);
181 |     -webkit-transform: rotate(90deg);
182 |     transform: rotate(90deg);
183 |   }
184 |   13% {
185 |     -moz-transform: rotate(180deg);
186 |     -ms-transform: rotate(180deg);
187 |     -webkit-transform: rotate(180deg);
188 |     transform: rotate(180deg);
189 |   }
190 |   20% {
191 |     -moz-transform: rotate(180deg);
192 |     -ms-transform: rotate(180deg);
193 |     -webkit-transform: rotate(180deg);
194 |     transform: rotate(180deg);
195 |   }
196 |   23% {
197 |     -moz-transform: rotate(90deg);
198 |     -ms-transform: rotate(90deg);
199 |     -webkit-transform: rotate(90deg);
200 |     transform: rotate(90deg);
201 |   }
202 |   30% {
203 |     -moz-transform: rotate(90deg);
204 |     -ms-transform: rotate(90deg);
205 |     -webkit-transform: rotate(90deg);
206 |     transform: rotate(90deg);
207 |   }
208 |   33% {
209 |     -moz-transform: rotate(180deg);
210 |     -ms-transform: rotate(180deg);
211 |     -webkit-transform: rotate(180deg);
212 |     transform: rotate(180deg);
213 |   }
214 |   40% {
215 |     -moz-transform: rotate(180deg);
216 |     -ms-transform: rotate(180deg);
217 |     -webkit-transform: rotate(180deg);
218 |     transform: rotate(180deg);
219 |   }
220 |   43% {
221 |     -moz-transform: rotate(270deg);
222 |     -ms-transform: rotate(270deg);
223 |     -webkit-transform: rotate(270deg);
224 |     transform: rotate(270deg);
225 |   }
226 |   50% {
227 |     -moz-transform: rotate(270deg);
228 |     -ms-transform: rotate(270deg);
229 |     -webkit-transform: rotate(270deg);
230 |     transform: rotate(270deg);
231 |   }
232 |   53% {
233 |     -moz-transform: rotate(180deg);
234 |     -ms-transform: rotate(180deg);
235 |     -webkit-transform: rotate(180deg);
236 |     transform: rotate(180deg);
237 |   }
238 |   60% {
239 |     -moz-transform: rotate(180deg);
240 |     -ms-transform: rotate(180deg);
241 |     -webkit-transform: rotate(180deg);
242 |     transform: rotate(180deg);
243 |   }
244 |   63% {
245 |     -moz-transform: rotate(90deg);
246 |     -ms-transform: rotate(90deg);
247 |     -webkit-transform: rotate(90deg);
248 |     transform: rotate(90deg);
249 |   }
250 |   70% {
251 |     -moz-transform: rotate(90deg);
252 |     -ms-transform: rotate(90deg);
253 |     -webkit-transform: rotate(90deg);
254 |     transform: rotate(90deg);
255 |   }
256 |   73% {
257 |     -moz-transform: rotate(0deg);
258 |     -ms-transform: rotate(0deg);
259 |     -webkit-transform: rotate(0deg);
260 |     transform: rotate(0deg);
261 |   }
262 |   80% {
263 |     -moz-transform: rotate(0deg);
264 |     -ms-transform: rotate(0deg);
265 |     -webkit-transform: rotate(0deg);
266 |     transform: rotate(0deg);
267 |   }
268 |   83% {
269 |     -moz-transform: rotate(-90deg);
270 |     -ms-transform: rotate(-90deg);
271 |     -webkit-transform: rotate(-90deg);
272 |     transform: rotate(-90deg);
273 |   }
274 |   90% {
275 |     -moz-transform: rotate(-90deg);
276 |     -ms-transform: rotate(-90deg);
277 |     -webkit-transform: rotate(-90deg);
278 |     transform: rotate(-90deg);
279 |   }
280 |   93% {
281 |     -moz-transform: rotate(0deg);
282 |     -ms-transform: rotate(0deg);
283 |     -webkit-transform: rotate(0deg);
284 |     transform: rotate(0deg);
285 |   }
286 | }
287 | /* :not(:required) hides this rule from IE9 and below */
288 | .atebits-loader:not(:required) {
289 |   background: rgba(0, 0, 0, 0.5);
290 |   display: inline-block;
291 |   width: 9px;
292 |   height: 9px;
293 |   overflow: hidden;
294 |   position: relative;
295 |   text-indent: -9999px;
296 |   -moz-box-shadow: rgba(0, 0, 0, 0.5) -12px -12px 0 0, rgba(0, 0, 0, 0.5) 12px -12px 0 0, rgba(0, 0, 0, 0.5) -12px 0 0 0, rgba(0, 0, 0, 0.5) 12px 0 0 0, rgba(0, 0, 0, 0.5) -12px 12px 0 0, rgba(0, 0, 0, 0.5) 0 12px 0 0, rgba(0, 0, 0, 0.5) 12px 12px 0 0;
297 |   -webkit-box-shadow: rgba(0, 0, 0, 0.5) -12px -12px 0 0, rgba(0, 0, 0, 0.5) 12px -12px 0 0, rgba(0, 0, 0, 0.5) -12px 0 0 0, rgba(0, 0, 0, 0.5) 12px 0 0 0, rgba(0, 0, 0, 0.5) -12px 12px 0 0, rgba(0, 0, 0, 0.5) 0 12px 0 0, rgba(0, 0, 0, 0.5) 12px 12px 0 0;
298 |   box-shadow: rgba(0, 0, 0, 0.5) -12px -12px 0 0, rgba(0, 0, 0, 0.5) 12px -12px 0 0, rgba(0, 0, 0, 0.5) -12px 0 0 0, rgba(0, 0, 0, 0.5) 12px 0 0 0, rgba(0, 0, 0, 0.5) -12px 12px 0 0, rgba(0, 0, 0, 0.5) 0 12px 0 0, rgba(0, 0, 0, 0.5) 12px 12px 0 0;
299 |   -moz-animation: atebits-loader 8s infinite ease-in-out;
300 |   -webkit-animation: atebits-loader 8s infinite ease-in-out;
301 |   animation: atebits-loader 8s infinite ease-in-out;
302 |   -moz-transform-origin: 50% 50%;
303 |   -ms-transform-origin: 50% 50%;
304 |   -webkit-transform-origin: 50% 50%;
305 |   transform-origin: 50% 50%;
306 | }
307 | 


--------------------------------------------------------------------------------
/css/spinner/ball.css:
--------------------------------------------------------------------------------
  1 | @-moz-keyframes ball-loader {
  2 |   0% {
  3 |     -moz-transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
  4 |     transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
  5 |     -moz-animation-timing-function: ease-in;
  6 |     animation-timing-function: ease-in;
  7 |   }
  8 |   45% {
  9 |     -moz-transform: translate3d(0, 150px, -10px) scale3d(1, 0.95, 1);
 10 |     transform: translate3d(0, 150px, -10px) scale3d(1, 0.95, 1);
 11 |     -moz-animation-timing-function: ease-in;
 12 |     animation-timing-function: ease-in;
 13 |   }
 14 |   50% {
 15 |     -moz-transform: translate3d(0, 150px, -10px) scale3d(1, 0.5, 1);
 16 |     transform: translate3d(0, 150px, -10px) scale3d(1, 0.5, 1);
 17 |     -moz-animation-timing-function: linear;
 18 |     animation-timing-function: linear;
 19 |   }
 20 |   55% {
 21 |     -moz-transform: translate3d(0, 150px, -10px) scale3d(1, 1.25, 1);
 22 |     transform: translate3d(0, 150px, -10px) scale3d(1, 1.25, 1);
 23 |     -moz-animation-timing-function: ease-out;
 24 |     animation-timing-function: ease-out;
 25 |   }
 26 | }
 27 | @-webkit-keyframes ball-loader {
 28 |   0% {
 29 |     -webkit-transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
 30 |     transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
 31 |     -webkit-animation-timing-function: ease-in;
 32 |     animation-timing-function: ease-in;
 33 |   }
 34 |   45% {
 35 |     -webkit-transform: translate3d(0, 150px, -10px) scale3d(1, 0.95, 1);
 36 |     transform: translate3d(0, 150px, -10px) scale3d(1, 0.95, 1);
 37 |     -webkit-animation-timing-function: ease-in;
 38 |     animation-timing-function: ease-in;
 39 |   }
 40 |   50% {
 41 |     -webkit-transform: translate3d(0, 150px, -10px) scale3d(1, 0.5, 1);
 42 |     transform: translate3d(0, 150px, -10px) scale3d(1, 0.5, 1);
 43 |     -webkit-animation-timing-function: linear;
 44 |     animation-timing-function: linear;
 45 |   }
 46 |   55% {
 47 |     -webkit-transform: translate3d(0, 150px, -10px) scale3d(1, 1.25, 1);
 48 |     transform: translate3d(0, 150px, -10px) scale3d(1, 1.25, 1);
 49 |     -webkit-animation-timing-function: ease-out;
 50 |     animation-timing-function: ease-out;
 51 |   }
 52 | }
 53 | @keyframes ball-loader {
 54 |   0% {
 55 |     -moz-transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
 56 |     -ms-transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
 57 |     -webkit-transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
 58 |     transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
 59 |     -moz-animation-timing-function: ease-in;
 60 |     -webkit-animation-timing-function: ease-in;
 61 |     animation-timing-function: ease-in;
 62 |   }
 63 |   45% {
 64 |     -moz-transform: translate3d(0, 150px, -10px) scale3d(1, 0.95, 1);
 65 |     -ms-transform: translate3d(0, 150px, -10px) scale3d(1, 0.95, 1);
 66 |     -webkit-transform: translate3d(0, 150px, -10px) scale3d(1, 0.95, 1);
 67 |     transform: translate3d(0, 150px, -10px) scale3d(1, 0.95, 1);
 68 |     -moz-animation-timing-function: ease-in;
 69 |     -webkit-animation-timing-function: ease-in;
 70 |     animation-timing-function: ease-in;
 71 |   }
 72 |   50% {
 73 |     -moz-transform: translate3d(0, 150px, -10px) scale3d(1, 0.5, 1);
 74 |     -ms-transform: translate3d(0, 150px, -10px) scale3d(1, 0.5, 1);
 75 |     -webkit-transform: translate3d(0, 150px, -10px) scale3d(1, 0.5, 1);
 76 |     transform: translate3d(0, 150px, -10px) scale3d(1, 0.5, 1);
 77 |     -moz-animation-timing-function: linear;
 78 |     -webkit-animation-timing-function: linear;
 79 |     animation-timing-function: linear;
 80 |   }
 81 |   55% {
 82 |     -moz-transform: translate3d(0, 150px, -10px) scale3d(1, 1.25, 1);
 83 |     -ms-transform: translate3d(0, 150px, -10px) scale3d(1, 1.25, 1);
 84 |     -webkit-transform: translate3d(0, 150px, -10px) scale3d(1, 1.25, 1);
 85 |     transform: translate3d(0, 150px, -10px) scale3d(1, 1.25, 1);
 86 |     -moz-animation-timing-function: ease-out;
 87 |     -webkit-animation-timing-function: ease-out;
 88 |     animation-timing-function: ease-out;
 89 |   }
 90 | }
 91 | @-moz-keyframes ball-loader-highlight {
 92 |   0% {
 93 |     -moz-transform: skew(-20deg, 0) translate3d(0, 2.5px, 1px);
 94 |     transform: skew(-20deg, 0) translate3d(0, 2.5px, 1px);
 95 |     -moz-animation-timing-function: ease-in;
 96 |     animation-timing-function: ease-in;
 97 |   }
 98 |   45% {
 99 |     -moz-transform: skew(-30deg, 0) translate3d(0, 0, 1px);
100 |     transform: skew(-30deg, 0) translate3d(0, 0, 1px);
101 |     -moz-animation-timing-function: ease-in;
102 |     animation-timing-function: ease-in;
103 |   }
104 |   50% {
105 |     -moz-transform: skew(-30deg, 0) translate3d(0, 0, 1px);
106 |     transform: skew(-30deg, 0) translate3d(0, 0, 1px);
107 |     -moz-animation-timing-function: linear;
108 |     animation-timing-function: linear;
109 |   }
110 |   55% {
111 |     -moz-transform: skew(-30deg, 0) translate3d(0, 0, 1px);
112 |     transform: skew(-30deg, 0) translate3d(0, 0, 1px);
113 |     -moz-animation-timing-function: ease-out;
114 |     animation-timing-function: ease-out;
115 |   }
116 |   100% {
117 |     -moz-transform: skew(-20deg, 0) translate3d(0, 2.5px, 1px);
118 |     transform: skew(-20deg, 0) translate3d(0, 2.5px, 1px);
119 |     -moz-animation-timing-function: ease-in;
120 |     animation-timing-function: ease-in;
121 |   }
122 | }
123 | @-webkit-keyframes ball-loader-highlight {
124 |   0% {
125 |     -webkit-transform: skew(-20deg, 0) translate3d(0, 2.5px, 1px);
126 |     transform: skew(-20deg, 0) translate3d(0, 2.5px, 1px);
127 |     -webkit-animation-timing-function: ease-in;
128 |     animation-timing-function: ease-in;
129 |   }
130 |   45% {
131 |     -webkit-transform: skew(-30deg, 0) translate3d(0, 0, 1px);
132 |     transform: skew(-30deg, 0) translate3d(0, 0, 1px);
133 |     -webkit-animation-timing-function: ease-in;
134 |     animation-timing-function: ease-in;
135 |   }
136 |   50% {
137 |     -webkit-transform: skew(-30deg, 0) translate3d(0, 0, 1px);
138 |     transform: skew(-30deg, 0) translate3d(0, 0, 1px);
139 |     -webkit-animation-timing-function: linear;
140 |     animation-timing-function: linear;
141 |   }
142 |   55% {
143 |     -webkit-transform: skew(-30deg, 0) translate3d(0, 0, 1px);
144 |     transform: skew(-30deg, 0) translate3d(0, 0, 1px);
145 |     -webkit-animation-timing-function: ease-out;
146 |     animation-timing-function: ease-out;
147 |   }
148 |   100% {
149 |     -webkit-transform: skew(-20deg, 0) translate3d(0, 2.5px, 1px);
150 |     transform: skew(-20deg, 0) translate3d(0, 2.5px, 1px);
151 |     -webkit-animation-timing-function: ease-in;
152 |     animation-timing-function: ease-in;
153 |   }
154 | }
155 | @keyframes ball-loader-highlight {
156 |   0% {
157 |     -moz-transform: skew(-20deg, 0) translate3d(0, 2.5px, 1px);
158 |     -ms-transform: skew(-20deg, 0) translate3d(0, 2.5px, 1px);
159 |     -webkit-transform: skew(-20deg, 0) translate3d(0, 2.5px, 1px);
160 |     transform: skew(-20deg, 0) translate3d(0, 2.5px, 1px);
161 |     -moz-animation-timing-function: ease-in;
162 |     -webkit-animation-timing-function: ease-in;
163 |     animation-timing-function: ease-in;
164 |   }
165 |   45% {
166 |     -moz-transform: skew(-30deg, 0) translate3d(0, 0, 1px);
167 |     -ms-transform: skew(-30deg, 0) translate3d(0, 0, 1px);
168 |     -webkit-transform: skew(-30deg, 0) translate3d(0, 0, 1px);
169 |     transform: skew(-30deg, 0) translate3d(0, 0, 1px);
170 |     -moz-animation-timing-function: ease-in;
171 |     -webkit-animation-timing-function: ease-in;
172 |     animation-timing-function: ease-in;
173 |   }
174 |   50% {
175 |     -moz-transform: skew(-30deg, 0) translate3d(0, 0, 1px);
176 |     -ms-transform: skew(-30deg, 0) translate3d(0, 0, 1px);
177 |     -webkit-transform: skew(-30deg, 0) translate3d(0, 0, 1px);
178 |     transform: skew(-30deg, 0) translate3d(0, 0, 1px);
179 |     -moz-animation-timing-function: linear;
180 |     -webkit-animation-timing-function: linear;
181 |     animation-timing-function: linear;
182 |   }
183 |   55% {
184 |     -moz-transform: skew(-30deg, 0) translate3d(0, 0, 1px);
185 |     -ms-transform: skew(-30deg, 0) translate3d(0, 0, 1px);
186 |     -webkit-transform: skew(-30deg, 0) translate3d(0, 0, 1px);
187 |     transform: skew(-30deg, 0) translate3d(0, 0, 1px);
188 |     -moz-animation-timing-function: ease-out;
189 |     -webkit-animation-timing-function: ease-out;
190 |     animation-timing-function: ease-out;
191 |   }
192 |   100% {
193 |     -moz-transform: skew(-20deg, 0) translate3d(0, 2.5px, 1px);
194 |     -ms-transform: skew(-20deg, 0) translate3d(0, 2.5px, 1px);
195 |     -webkit-transform: skew(-20deg, 0) translate3d(0, 2.5px, 1px);
196 |     transform: skew(-20deg, 0) translate3d(0, 2.5px, 1px);
197 |     -moz-animation-timing-function: ease-in;
198 |     -webkit-animation-timing-function: ease-in;
199 |     animation-timing-function: ease-in;
200 |   }
201 | }
202 | @-moz-keyframes ball-loader-shadow {
203 |   0% {
204 |     -moz-transform: translate3d(66.66667px, 66.66667px, -1px) scale3d(1.25, 1.25, 1);
205 |     transform: translate3d(66.66667px, 66.66667px, -1px) scale3d(1.25, 1.25, 1);
206 |     -moz-animation-timing-function: ease-in;
207 |     animation-timing-function: ease-in;
208 |   }
209 |   45% {
210 |     -moz-transform: translate3d(12.5px, -15px, -1px);
211 |     transform: translate3d(12.5px, -15px, -1px);
212 |     -moz-animation-timing-function: ease-in;
213 |     animation-timing-function: ease-in;
214 |   }
215 |   50% {
216 |     -moz-transform: translate3d(12.5px, -15px, -1px) scale3d(1, 1, 1);
217 |     transform: translate3d(12.5px, -15px, -1px) scale3d(1, 1, 1);
218 |     -moz-animation-timing-function: linear;
219 |     animation-timing-function: linear;
220 |   }
221 |   55% {
222 |     -moz-transform: translate3d(12.5px, -15px, -1px);
223 |     transform: translate3d(12.5px, -15px, -1px);
224 |     -moz-animation-timing-function: ease-out;
225 |     animation-timing-function: ease-out;
226 |   }
227 |   100% {
228 |     -moz-transform: translate3d(66.66667px, 66.66667px, -1px) scale3d(1.25, 1.25, 1);
229 |     transform: translate3d(66.66667px, 66.66667px, -1px) scale3d(1.25, 1.25, 1);
230 |     -moz-animation-timing-function: ease-in;
231 |     animation-timing-function: ease-in;
232 |   }
233 | }
234 | @-webkit-keyframes ball-loader-shadow {
235 |   0% {
236 |     -webkit-transform: translate3d(66.66667px, 66.66667px, -1px) scale3d(1.25, 1.25, 1);
237 |     transform: translate3d(66.66667px, 66.66667px, -1px) scale3d(1.25, 1.25, 1);
238 |     -webkit-animation-timing-function: ease-in;
239 |     animation-timing-function: ease-in;
240 |   }
241 |   45% {
242 |     -webkit-transform: translate3d(12.5px, -15px, -1px);
243 |     transform: translate3d(12.5px, -15px, -1px);
244 |     -webkit-animation-timing-function: ease-in;
245 |     animation-timing-function: ease-in;
246 |   }
247 |   50% {
248 |     -webkit-transform: translate3d(12.5px, -15px, -1px) scale3d(1, 1, 1);
249 |     transform: translate3d(12.5px, -15px, -1px) scale3d(1, 1, 1);
250 |     -webkit-animation-timing-function: linear;
251 |     animation-timing-function: linear;
252 |   }
253 |   55% {
254 |     -webkit-transform: translate3d(12.5px, -15px, -1px);
255 |     transform: translate3d(12.5px, -15px, -1px);
256 |     -webkit-animation-timing-function: ease-out;
257 |     animation-timing-function: ease-out;
258 |   }
259 |   100% {
260 |     -webkit-transform: translate3d(66.66667px, 66.66667px, -1px) scale3d(1.25, 1.25, 1);
261 |     transform: translate3d(66.66667px, 66.66667px, -1px) scale3d(1.25, 1.25, 1);
262 |     -webkit-animation-timing-function: ease-in;
263 |     animation-timing-function: ease-in;
264 |   }
265 | }
266 | @keyframes ball-loader-shadow {
267 |   0% {
268 |     -moz-transform: translate3d(66.66667px, 66.66667px, -1px) scale3d(1.25, 1.25, 1);
269 |     -ms-transform: translate3d(66.66667px, 66.66667px, -1px) scale3d(1.25, 1.25, 1);
270 |     -webkit-transform: translate3d(66.66667px, 66.66667px, -1px) scale3d(1.25, 1.25, 1);
271 |     transform: translate3d(66.66667px, 66.66667px, -1px) scale3d(1.25, 1.25, 1);
272 |     -moz-animation-timing-function: ease-in;
273 |     -webkit-animation-timing-function: ease-in;
274 |     animation-timing-function: ease-in;
275 |   }
276 |   45% {
277 |     -moz-transform: translate3d(12.5px, -15px, -1px);
278 |     -ms-transform: translate3d(12.5px, -15px, -1px);
279 |     -webkit-transform: translate3d(12.5px, -15px, -1px);
280 |     transform: translate3d(12.5px, -15px, -1px);
281 |     -moz-animation-timing-function: ease-in;
282 |     -webkit-animation-timing-function: ease-in;
283 |     animation-timing-function: ease-in;
284 |   }
285 |   50% {
286 |     -moz-transform: translate3d(12.5px, -15px, -1px) scale3d(1, 1, 1);
287 |     -ms-transform: translate3d(12.5px, -15px, -1px) scale3d(1, 1, 1);
288 |     -webkit-transform: translate3d(12.5px, -15px, -1px) scale3d(1, 1, 1);
289 |     transform: translate3d(12.5px, -15px, -1px) scale3d(1, 1, 1);
290 |     -moz-animation-timing-function: linear;
291 |     -webkit-animation-timing-function: linear;
292 |     animation-timing-function: linear;
293 |   }
294 |   55% {
295 |     -moz-transform: translate3d(12.5px, -15px, -1px);
296 |     -ms-transform: translate3d(12.5px, -15px, -1px);
297 |     -webkit-transform: translate3d(12.5px, -15px, -1px);
298 |     transform: translate3d(12.5px, -15px, -1px);
299 |     -moz-animation-timing-function: ease-out;
300 |     -webkit-animation-timing-function: ease-out;
301 |     animation-timing-function: ease-out;
302 |   }
303 |   100% {
304 |     -moz-transform: translate3d(66.66667px, 66.66667px, -1px) scale3d(1.25, 1.25, 1);
305 |     -ms-transform: translate3d(66.66667px, 66.66667px, -1px) scale3d(1.25, 1.25, 1);
306 |     -webkit-transform: translate3d(66.66667px, 66.66667px, -1px) scale3d(1.25, 1.25, 1);
307 |     transform: translate3d(66.66667px, 66.66667px, -1px) scale3d(1.25, 1.25, 1);
308 |     -moz-animation-timing-function: ease-in;
309 |     -webkit-animation-timing-function: ease-in;
310 |     animation-timing-function: ease-in;
311 |   }
312 | }
313 | /* :not(:required) hides this rule from IE9 and below */
314 | .ball-loader:not(:required) {
315 |   position: relative;
316 |   display: inline-block;
317 |   font-size: 0;
318 |   letter-spacing: -1px;
319 |   border-radius: 100%;
320 |   background: #f86;
321 |   width: 50px;
322 |   height: 50px;
323 |   -moz-transform-style: preserve-3d;
324 |   -webkit-transform-style: preserve-3d;
325 |   transform-style: preserve-3d;
326 |   -moz-transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
327 |   -ms-transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
328 |   -webkit-transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
329 |   transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
330 |   -moz-transform-origin: 0 100%;
331 |   -ms-transform-origin: 0 100%;
332 |   -webkit-transform-origin: 0 100%;
333 |   transform-origin: 0 100%;
334 |   -moz-animation: ball-loader 1500ms infinite linear;
335 |   -webkit-animation: ball-loader 1500ms infinite linear;
336 |   animation: ball-loader 1500ms infinite linear;
337 | }
338 | .ball-loader:not(:required)::after {
339 |   content: '';
340 |   position: absolute;
341 |   top: 4.5px;
342 |   left: 5.5px;
343 |   width: 15px;
344 |   height: 15px;
345 |   background: #ffb099;
346 |   border-radius: 100%;
347 |   -moz-transform: skew(-20deg, 0) translate3d(0, 2.5px, 1px);
348 |   -ms-transform: skew(-20deg, 0) translate3d(0, 2.5px, 1px);
349 |   -webkit-transform: skew(-20deg, 0) translate3d(0, 2.5px, 1px);
350 |   transform: skew(-20deg, 0) translate3d(0, 2.5px, 1px);
351 |   -moz-animation: ball-loader-highlight 1500ms infinite linear;
352 |   -webkit-animation: ball-loader-highlight 1500ms infinite linear;
353 |   animation: ball-loader-highlight 1500ms infinite linear;
354 | }
355 | .ball-loader:not(:required)::before {
356 |   content: '';
357 |   position: absolute;
358 |   top: 50px;
359 |   left: 5.5px;
360 |   width: 50px;
361 |   height: 15px;
362 |   background: rgba(0, 0, 0, 0.2);
363 |   border-radius: 100%;
364 |   -moz-transform: translate3d(66.66667px, 66.66667px, -1px) scale3d(1.25, 1.25, 1);
365 |   -ms-transform: translate3d(66.66667px, 66.66667px, -1px) scale3d(1.25, 1.25, 1);
366 |   -webkit-transform: translate3d(66.66667px, 66.66667px, -1px) scale3d(1.25, 1.25, 1);
367 |   transform: translate3d(66.66667px, 66.66667px, -1px) scale3d(1.25, 1.25, 1);
368 |   -moz-animation: ball-loader-shadow 1500ms infinite linear;
369 |   -webkit-animation: ball-loader-shadow 1500ms infinite linear;
370 |   animation: ball-loader-shadow 1500ms infinite linear;
371 |   -webkit-filter: blur(1px);
372 |   filter: blur(1px);
373 | }
374 | 


--------------------------------------------------------------------------------
/css/spinner/circles.css:
--------------------------------------------------------------------------------
 1 | @-moz-keyframes circles-loader {
 2 |   0% {
 3 |     -moz-transform: rotate(-720deg);
 4 |     transform: rotate(-720deg);
 5 |   }
 6 |   50% {
 7 |     -moz-transform: rotate(720deg);
 8 |     transform: rotate(720deg);
 9 |   }
10 | }
11 | @-webkit-keyframes circles-loader {
12 |   0% {
13 |     -webkit-transform: rotate(-720deg);
14 |     transform: rotate(-720deg);
15 |   }
16 |   50% {
17 |     -webkit-transform: rotate(720deg);
18 |     transform: rotate(720deg);
19 |   }
20 | }
21 | @keyframes circles-loader {
22 |   0% {
23 |     -moz-transform: rotate(-720deg);
24 |     -ms-transform: rotate(-720deg);
25 |     -webkit-transform: rotate(-720deg);
26 |     transform: rotate(-720deg);
27 |   }
28 |   50% {
29 |     -moz-transform: rotate(720deg);
30 |     -ms-transform: rotate(720deg);
31 |     -webkit-transform: rotate(720deg);
32 |     transform: rotate(720deg);
33 |   }
34 | }
35 | /* :not(:required) hides this rule from IE9 and below */
36 | .circles-loader:not(:required) {
37 |   position: relative;
38 |   text-indent: -9999px;
39 |   display: inline-block;
40 |   width: 25px;
41 |   height: 25px;
42 |   background: rgba(255, 204, 51, 0.9);
43 |   border-radius: 100%;
44 |   -moz-animation: circles-loader 3s infinite ease-in-out;
45 |   -webkit-animation: circles-loader 3s infinite ease-in-out;
46 |   animation: circles-loader 3s infinite ease-in-out;
47 |   -moz-transform-origin: 50% 100%;
48 |   -ms-transform-origin: 50% 100%;
49 |   -webkit-transform-origin: 50% 100%;
50 |   transform-origin: 50% 100%;
51 | }
52 | .circles-loader:not(:required)::before {
53 |   background: rgba(255, 102, 0, 0.6);
54 |   border-radius: 100%;
55 |   content: '';
56 |   position: absolute;
57 |   width: 25px;
58 |   height: 25px;
59 |   top: 18.75px;
60 |   left: -10.82532px;
61 | }
62 | .circles-loader:not(:required)::after {
63 |   background: rgba(255, 51, 0, 0.4);
64 |   border-radius: 100%;
65 |   content: '';
66 |   position: absolute;
67 |   width: 25px;
68 |   height: 25px;
69 |   top: 18.75px;
70 |   left: 10.82532px;
71 | }
72 | 


--------------------------------------------------------------------------------
/css/spinner/dots.css:
--------------------------------------------------------------------------------
  1 | @-moz-keyframes dots-loader {
  2 |   0% {
  3 |     -moz-box-shadow: #f86 -14px -14px 0 7px, #fc6 14px -14px 0 7px, #6d7 14px 14px 0 7px, #4ae -14px 14px 0 7px;
  4 |     box-shadow: #f86 -14px -14px 0 7px, #fc6 14px -14px 0 7px, #6d7 14px 14px 0 7px, #4ae -14px 14px 0 7px;
  5 |   }
  6 |   8.33% {
  7 |     -moz-box-shadow: #f86 14px -14px 0 7px, #fc6 14px -14px 0 7px, #6d7 14px 14px 0 7px, #4ae -14px 14px 0 7px;
  8 |     box-shadow: #f86 14px -14px 0 7px, #fc6 14px -14px 0 7px, #6d7 14px 14px 0 7px, #4ae -14px 14px 0 7px;
  9 |   }
 10 |   16.67% {
 11 |     -moz-box-shadow: #f86 14px 14px 0 7px, #fc6 14px 14px 0 7px, #6d7 14px 14px 0 7px, #4ae -14px 14px 0 7px;
 12 |     box-shadow: #f86 14px 14px 0 7px, #fc6 14px 14px 0 7px, #6d7 14px 14px 0 7px, #4ae -14px 14px 0 7px;
 13 |   }
 14 |   25% {
 15 |     -moz-box-shadow: #f86 -14px 14px 0 7px, #fc6 -14px 14px 0 7px, #6d7 -14px 14px 0 7px, #4ae -14px 14px 0 7px;
 16 |     box-shadow: #f86 -14px 14px 0 7px, #fc6 -14px 14px 0 7px, #6d7 -14px 14px 0 7px, #4ae -14px 14px 0 7px;
 17 |   }
 18 |   33.33% {
 19 |     -moz-box-shadow: #f86 -14px -14px 0 7px, #fc6 -14px 14px 0 7px, #6d7 -14px -14px 0 7px, #4ae -14px -14px 0 7px;
 20 |     box-shadow: #f86 -14px -14px 0 7px, #fc6 -14px 14px 0 7px, #6d7 -14px -14px 0 7px, #4ae -14px -14px 0 7px;
 21 |   }
 22 |   41.67% {
 23 |     -moz-box-shadow: #f86 14px -14px 0 7px, #fc6 -14px 14px 0 7px, #6d7 -14px -14px 0 7px, #4ae 14px -14px 0 7px;
 24 |     box-shadow: #f86 14px -14px 0 7px, #fc6 -14px 14px 0 7px, #6d7 -14px -14px 0 7px, #4ae 14px -14px 0 7px;
 25 |   }
 26 |   50% {
 27 |     -moz-box-shadow: #f86 14px 14px 0 7px, #fc6 -14px 14px 0 7px, #6d7 -14px -14px 0 7px, #4ae 14px -14px 0 7px;
 28 |     box-shadow: #f86 14px 14px 0 7px, #fc6 -14px 14px 0 7px, #6d7 -14px -14px 0 7px, #4ae 14px -14px 0 7px;
 29 |   }
 30 |   58.33% {
 31 |     -moz-box-shadow: #f86 -14px 14px 0 7px, #fc6 -14px 14px 0 7px, #6d7 -14px -14px 0 7px, #4ae 14px -14px 0 7px;
 32 |     box-shadow: #f86 -14px 14px 0 7px, #fc6 -14px 14px 0 7px, #6d7 -14px -14px 0 7px, #4ae 14px -14px 0 7px;
 33 |   }
 34 |   66.67% {
 35 |     -moz-box-shadow: #f86 -14px -14px 0 7px, #fc6 -14px -14px 0 7px, #6d7 -14px -14px 0 7px, #4ae 14px -14px 0 7px;
 36 |     box-shadow: #f86 -14px -14px 0 7px, #fc6 -14px -14px 0 7px, #6d7 -14px -14px 0 7px, #4ae 14px -14px 0 7px;
 37 |   }
 38 |   75% {
 39 |     -moz-box-shadow: #f86 14px -14px 0 7px, #fc6 14px -14px 0 7px, #6d7 14px -14px 0 7px, #4ae 14px -14px 0 7px;
 40 |     box-shadow: #f86 14px -14px 0 7px, #fc6 14px -14px 0 7px, #6d7 14px -14px 0 7px, #4ae 14px -14px 0 7px;
 41 |   }
 42 |   83.33% {
 43 |     -moz-box-shadow: #f86 14px 14px 0 7px, #fc6 14px -14px 0 7px, #6d7 14px 14px 0 7px, #4ae 14px 14px 0 7px;
 44 |     box-shadow: #f86 14px 14px 0 7px, #fc6 14px -14px 0 7px, #6d7 14px 14px 0 7px, #4ae 14px 14px 0 7px;
 45 |   }
 46 |   91.67% {
 47 |     -moz-box-shadow: #f86 -14px 14px 0 7px, #fc6 14px -14px 0 7px, #6d7 14px 14px 0 7px, #4ae -14px 14px 0 7px;
 48 |     box-shadow: #f86 -14px 14px 0 7px, #fc6 14px -14px 0 7px, #6d7 14px 14px 0 7px, #4ae -14px 14px 0 7px;
 49 |   }
 50 |   100% {
 51 |     -moz-box-shadow: #f86 -14px -14px 0 7px, #fc6 14px -14px 0 7px, #6d7 14px 14px 0 7px, #4ae -14px 14px 0 7px;
 52 |     box-shadow: #f86 -14px -14px 0 7px, #fc6 14px -14px 0 7px, #6d7 14px 14px 0 7px, #4ae -14px 14px 0 7px;
 53 |   }
 54 | }
 55 | @-webkit-keyframes dots-loader {
 56 |   0% {
 57 |     -webkit-box-shadow: #f86 -14px -14px 0 7px, #fc6 14px -14px 0 7px, #6d7 14px 14px 0 7px, #4ae -14px 14px 0 7px;
 58 |     box-shadow: #f86 -14px -14px 0 7px, #fc6 14px -14px 0 7px, #6d7 14px 14px 0 7px, #4ae -14px 14px 0 7px;
 59 |   }
 60 |   8.33% {
 61 |     -webkit-box-shadow: #f86 14px -14px 0 7px, #fc6 14px -14px 0 7px, #6d7 14px 14px 0 7px, #4ae -14px 14px 0 7px;
 62 |     box-shadow: #f86 14px -14px 0 7px, #fc6 14px -14px 0 7px, #6d7 14px 14px 0 7px, #4ae -14px 14px 0 7px;
 63 |   }
 64 |   16.67% {
 65 |     -webkit-box-shadow: #f86 14px 14px 0 7px, #fc6 14px 14px 0 7px, #6d7 14px 14px 0 7px, #4ae -14px 14px 0 7px;
 66 |     box-shadow: #f86 14px 14px 0 7px, #fc6 14px 14px 0 7px, #6d7 14px 14px 0 7px, #4ae -14px 14px 0 7px;
 67 |   }
 68 |   25% {
 69 |     -webkit-box-shadow: #f86 -14px 14px 0 7px, #fc6 -14px 14px 0 7px, #6d7 -14px 14px 0 7px, #4ae -14px 14px 0 7px;
 70 |     box-shadow: #f86 -14px 14px 0 7px, #fc6 -14px 14px 0 7px, #6d7 -14px 14px 0 7px, #4ae -14px 14px 0 7px;
 71 |   }
 72 |   33.33% {
 73 |     -webkit-box-shadow: #f86 -14px -14px 0 7px, #fc6 -14px 14px 0 7px, #6d7 -14px -14px 0 7px, #4ae -14px -14px 0 7px;
 74 |     box-shadow: #f86 -14px -14px 0 7px, #fc6 -14px 14px 0 7px, #6d7 -14px -14px 0 7px, #4ae -14px -14px 0 7px;
 75 |   }
 76 |   41.67% {
 77 |     -webkit-box-shadow: #f86 14px -14px 0 7px, #fc6 -14px 14px 0 7px, #6d7 -14px -14px 0 7px, #4ae 14px -14px 0 7px;
 78 |     box-shadow: #f86 14px -14px 0 7px, #fc6 -14px 14px 0 7px, #6d7 -14px -14px 0 7px, #4ae 14px -14px 0 7px;
 79 |   }
 80 |   50% {
 81 |     -webkit-box-shadow: #f86 14px 14px 0 7px, #fc6 -14px 14px 0 7px, #6d7 -14px -14px 0 7px, #4ae 14px -14px 0 7px;
 82 |     box-shadow: #f86 14px 14px 0 7px, #fc6 -14px 14px 0 7px, #6d7 -14px -14px 0 7px, #4ae 14px -14px 0 7px;
 83 |   }
 84 |   58.33% {
 85 |     -webkit-box-shadow: #f86 -14px 14px 0 7px, #fc6 -14px 14px 0 7px, #6d7 -14px -14px 0 7px, #4ae 14px -14px 0 7px;
 86 |     box-shadow: #f86 -14px 14px 0 7px, #fc6 -14px 14px 0 7px, #6d7 -14px -14px 0 7px, #4ae 14px -14px 0 7px;
 87 |   }
 88 |   66.67% {
 89 |     -webkit-box-shadow: #f86 -14px -14px 0 7px, #fc6 -14px -14px 0 7px, #6d7 -14px -14px 0 7px, #4ae 14px -14px 0 7px;
 90 |     box-shadow: #f86 -14px -14px 0 7px, #fc6 -14px -14px 0 7px, #6d7 -14px -14px 0 7px, #4ae 14px -14px 0 7px;
 91 |   }
 92 |   75% {
 93 |     -webkit-box-shadow: #f86 14px -14px 0 7px, #fc6 14px -14px 0 7px, #6d7 14px -14px 0 7px, #4ae 14px -14px 0 7px;
 94 |     box-shadow: #f86 14px -14px 0 7px, #fc6 14px -14px 0 7px, #6d7 14px -14px 0 7px, #4ae 14px -14px 0 7px;
 95 |   }
 96 |   83.33% {
 97 |     -webkit-box-shadow: #f86 14px 14px 0 7px, #fc6 14px -14px 0 7px, #6d7 14px 14px 0 7px, #4ae 14px 14px 0 7px;
 98 |     box-shadow: #f86 14px 14px 0 7px, #fc6 14px -14px 0 7px, #6d7 14px 14px 0 7px, #4ae 14px 14px 0 7px;
 99 |   }
100 |   91.67% {
101 |     -webkit-box-shadow: #f86 -14px 14px 0 7px, #fc6 14px -14px 0 7px, #6d7 14px 14px 0 7px, #4ae -14px 14px 0 7px;
102 |     box-shadow: #f86 -14px 14px 0 7px, #fc6 14px -14px 0 7px, #6d7 14px 14px 0 7px, #4ae -14px 14px 0 7px;
103 |   }
104 |   100% {
105 |     -webkit-box-shadow: #f86 -14px -14px 0 7px, #fc6 14px -14px 0 7px, #6d7 14px 14px 0 7px, #4ae -14px 14px 0 7px;
106 |     box-shadow: #f86 -14px -14px 0 7px, #fc6 14px -14px 0 7px, #6d7 14px 14px 0 7px, #4ae -14px 14px 0 7px;
107 |   }
108 | }
109 | @keyframes dots-loader {
110 |   0% {
111 |     -moz-box-shadow: #f86 -14px -14px 0 7px, #fc6 14px -14px 0 7px, #6d7 14px 14px 0 7px, #4ae -14px 14px 0 7px;
112 |     -webkit-box-shadow: #f86 -14px -14px 0 7px, #fc6 14px -14px 0 7px, #6d7 14px 14px 0 7px, #4ae -14px 14px 0 7px;
113 |     box-shadow: #f86 -14px -14px 0 7px, #fc6 14px -14px 0 7px, #6d7 14px 14px 0 7px, #4ae -14px 14px 0 7px;
114 |   }
115 |   8.33% {
116 |     -moz-box-shadow: #f86 14px -14px 0 7px, #fc6 14px -14px 0 7px, #6d7 14px 14px 0 7px, #4ae -14px 14px 0 7px;
117 |     -webkit-box-shadow: #f86 14px -14px 0 7px, #fc6 14px -14px 0 7px, #6d7 14px 14px 0 7px, #4ae -14px 14px 0 7px;
118 |     box-shadow: #f86 14px -14px 0 7px, #fc6 14px -14px 0 7px, #6d7 14px 14px 0 7px, #4ae -14px 14px 0 7px;
119 |   }
120 |   16.67% {
121 |     -moz-box-shadow: #f86 14px 14px 0 7px, #fc6 14px 14px 0 7px, #6d7 14px 14px 0 7px, #4ae -14px 14px 0 7px;
122 |     -webkit-box-shadow: #f86 14px 14px 0 7px, #fc6 14px 14px 0 7px, #6d7 14px 14px 0 7px, #4ae -14px 14px 0 7px;
123 |     box-shadow: #f86 14px 14px 0 7px, #fc6 14px 14px 0 7px, #6d7 14px 14px 0 7px, #4ae -14px 14px 0 7px;
124 |   }
125 |   25% {
126 |     -moz-box-shadow: #f86 -14px 14px 0 7px, #fc6 -14px 14px 0 7px, #6d7 -14px 14px 0 7px, #4ae -14px 14px 0 7px;
127 |     -webkit-box-shadow: #f86 -14px 14px 0 7px, #fc6 -14px 14px 0 7px, #6d7 -14px 14px 0 7px, #4ae -14px 14px 0 7px;
128 |     box-shadow: #f86 -14px 14px 0 7px, #fc6 -14px 14px 0 7px, #6d7 -14px 14px 0 7px, #4ae -14px 14px 0 7px;
129 |   }
130 |   33.33% {
131 |     -moz-box-shadow: #f86 -14px -14px 0 7px, #fc6 -14px 14px 0 7px, #6d7 -14px -14px 0 7px, #4ae -14px -14px 0 7px;
132 |     -webkit-box-shadow: #f86 -14px -14px 0 7px, #fc6 -14px 14px 0 7px, #6d7 -14px -14px 0 7px, #4ae -14px -14px 0 7px;
133 |     box-shadow: #f86 -14px -14px 0 7px, #fc6 -14px 14px 0 7px, #6d7 -14px -14px 0 7px, #4ae -14px -14px 0 7px;
134 |   }
135 |   41.67% {
136 |     -moz-box-shadow: #f86 14px -14px 0 7px, #fc6 -14px 14px 0 7px, #6d7 -14px -14px 0 7px, #4ae 14px -14px 0 7px;
137 |     -webkit-box-shadow: #f86 14px -14px 0 7px, #fc6 -14px 14px 0 7px, #6d7 -14px -14px 0 7px, #4ae 14px -14px 0 7px;
138 |     box-shadow: #f86 14px -14px 0 7px, #fc6 -14px 14px 0 7px, #6d7 -14px -14px 0 7px, #4ae 14px -14px 0 7px;
139 |   }
140 |   50% {
141 |     -moz-box-shadow: #f86 14px 14px 0 7px, #fc6 -14px 14px 0 7px, #6d7 -14px -14px 0 7px, #4ae 14px -14px 0 7px;
142 |     -webkit-box-shadow: #f86 14px 14px 0 7px, #fc6 -14px 14px 0 7px, #6d7 -14px -14px 0 7px, #4ae 14px -14px 0 7px;
143 |     box-shadow: #f86 14px 14px 0 7px, #fc6 -14px 14px 0 7px, #6d7 -14px -14px 0 7px, #4ae 14px -14px 0 7px;
144 |   }
145 |   58.33% {
146 |     -moz-box-shadow: #f86 -14px 14px 0 7px, #fc6 -14px 14px 0 7px, #6d7 -14px -14px 0 7px, #4ae 14px -14px 0 7px;
147 |     -webkit-box-shadow: #f86 -14px 14px 0 7px, #fc6 -14px 14px 0 7px, #6d7 -14px -14px 0 7px, #4ae 14px -14px 0 7px;
148 |     box-shadow: #f86 -14px 14px 0 7px, #fc6 -14px 14px 0 7px, #6d7 -14px -14px 0 7px, #4ae 14px -14px 0 7px;
149 |   }
150 |   66.67% {
151 |     -moz-box-shadow: #f86 -14px -14px 0 7px, #fc6 -14px -14px 0 7px, #6d7 -14px -14px 0 7px, #4ae 14px -14px 0 7px;
152 |     -webkit-box-shadow: #f86 -14px -14px 0 7px, #fc6 -14px -14px 0 7px, #6d7 -14px -14px 0 7px, #4ae 14px -14px 0 7px;
153 |     box-shadow: #f86 -14px -14px 0 7px, #fc6 -14px -14px 0 7px, #6d7 -14px -14px 0 7px, #4ae 14px -14px 0 7px;
154 |   }
155 |   75% {
156 |     -moz-box-shadow: #f86 14px -14px 0 7px, #fc6 14px -14px 0 7px, #6d7 14px -14px 0 7px, #4ae 14px -14px 0 7px;
157 |     -webkit-box-shadow: #f86 14px -14px 0 7px, #fc6 14px -14px 0 7px, #6d7 14px -14px 0 7px, #4ae 14px -14px 0 7px;
158 |     box-shadow: #f86 14px -14px 0 7px, #fc6 14px -14px 0 7px, #6d7 14px -14px 0 7px, #4ae 14px -14px 0 7px;
159 |   }
160 |   83.33% {
161 |     -moz-box-shadow: #f86 14px 14px 0 7px, #fc6 14px -14px 0 7px, #6d7 14px 14px 0 7px, #4ae 14px 14px 0 7px;
162 |     -webkit-box-shadow: #f86 14px 14px 0 7px, #fc6 14px -14px 0 7px, #6d7 14px 14px 0 7px, #4ae 14px 14px 0 7px;
163 |     box-shadow: #f86 14px 14px 0 7px, #fc6 14px -14px 0 7px, #6d7 14px 14px 0 7px, #4ae 14px 14px 0 7px;
164 |   }
165 |   91.67% {
166 |     -moz-box-shadow: #f86 -14px 14px 0 7px, #fc6 14px -14px 0 7px, #6d7 14px 14px 0 7px, #4ae -14px 14px 0 7px;
167 |     -webkit-box-shadow: #f86 -14px 14px 0 7px, #fc6 14px -14px 0 7px, #6d7 14px 14px 0 7px, #4ae -14px 14px 0 7px;
168 |     box-shadow: #f86 -14px 14px 0 7px, #fc6 14px -14px 0 7px, #6d7 14px 14px 0 7px, #4ae -14px 14px 0 7px;
169 |   }
170 |   100% {
171 |     -moz-box-shadow: #f86 -14px -14px 0 7px, #fc6 14px -14px 0 7px, #6d7 14px 14px 0 7px, #4ae -14px 14px 0 7px;
172 |     -webkit-box-shadow: #f86 -14px -14px 0 7px, #fc6 14px -14px 0 7px, #6d7 14px 14px 0 7px, #4ae -14px 14px 0 7px;
173 |     box-shadow: #f86 -14px -14px 0 7px, #fc6 14px -14px 0 7px, #6d7 14px 14px 0 7px, #4ae -14px 14px 0 7px;
174 |   }
175 | }
176 | /* :not(:required) hides this rule from IE9 and below */
177 | .dots-loader:not(:required) {
178 |   overflow: hidden;
179 |   position: relative;
180 |   text-indent: -9999px;
181 |   display: inline-block;
182 |   width: 7px;
183 |   height: 7px;
184 |   background: transparent;
185 |   border-radius: 100%;
186 |   -moz-box-shadow: #f86 -14px -14px 0 7px, #fc6 14px -14px 0 7px, #6d7 14px 14px 0 7px, #4ae -14px 14px 0 7px;
187 |   -webkit-box-shadow: #f86 -14px -14px 0 7px, #fc6 14px -14px 0 7px, #6d7 14px 14px 0 7px, #4ae -14px 14px 0 7px;
188 |   box-shadow: #f86 -14px -14px 0 7px, #fc6 14px -14px 0 7px, #6d7 14px 14px 0 7px, #4ae -14px 14px 0 7px;
189 |   -moz-animation: dots-loader 5s infinite ease-in-out;
190 |   -webkit-animation: dots-loader 5s infinite ease-in-out;
191 |   animation: dots-loader 5s infinite ease-in-out;
192 |   -moz-transform-origin: 50% 50%;
193 |   -ms-transform-origin: 50% 50%;
194 |   -webkit-transform-origin: 50% 50%;
195 |   transform-origin: 50% 50%;
196 | }
197 | 


--------------------------------------------------------------------------------
/css/spinner/echo.css:
--------------------------------------------------------------------------------
  1 | /* :not(:required) hides this rule from IE9 and below */
  2 | .echo-loader:not(:required) {
  3 |   width: 40px;
  4 |   height: 40px;
  5 |   border: 6px solid #FF0000;
  6 |   -moz-border-radius: 50%;
  7 |   -webkit-border-radius: 50%;
  8 |   border-radius: 50%;
  9 |   animation: echo-loader 1.4s ease-in;
 10 |   animation-iteration-count: infinite;
 11 |   display: inline-block;
 12 |   text-indent: 100%;
 13 |   overflow: hidden;
 14 | }
 15 | 
 16 | @-moz-keyframes echo-loader {
 17 |   0% {
 18 |     -moz-transform: scale(0);
 19 |     -ms-transform: scale(0);
 20 |     -webkit-transform: scale(0);
 21 |     transform: scale(0);
 22 |     opacity: 0.0;
 23 |   }
 24 |   25% {
 25 |     -moz-transform: scale(0);
 26 |     -ms-transform: scale(0);
 27 |     -webkit-transform: scale(0);
 28 |     transform: scale(0);
 29 |     opacity: .1;
 30 |   }
 31 |   50% {
 32 |     -moz-transform: scale(0.1);
 33 |     -ms-transform: scale(0.1);
 34 |     -webkit-transform: scale(0.1);
 35 |     transform: scale(0.1);
 36 |     opacity: .3;
 37 |   }
 38 |   75% {
 39 |     -moz-transform: scale(0.5);
 40 |     -ms-transform: scale(0.5);
 41 |     -webkit-transform: scale(0.5);
 42 |     transform: scale(0.5);
 43 |     opacity: .5;
 44 |   }
 45 |   100% {
 46 |     -moz-transform: scale(1);
 47 |     -ms-transform: scale(1);
 48 |     -webkit-transform: scale(1);
 49 |     transform: scale(1);
 50 |     opacity: 0;
 51 |   }
 52 | }
 53 | @-webkit-keyframes echo-loader {
 54 |   0% {
 55 |     -moz-transform: scale(0);
 56 |     -ms-transform: scale(0);
 57 |     -webkit-transform: scale(0);
 58 |     transform: scale(0);
 59 |     opacity: 0.0;
 60 |   }
 61 |   25% {
 62 |     -moz-transform: scale(0);
 63 |     -ms-transform: scale(0);
 64 |     -webkit-transform: scale(0);
 65 |     transform: scale(0);
 66 |     opacity: .1;
 67 |   }
 68 |   50% {
 69 |     -moz-transform: scale(0.1);
 70 |     -ms-transform: scale(0.1);
 71 |     -webkit-transform: scale(0.1);
 72 |     transform: scale(0.1);
 73 |     opacity: .3;
 74 |   }
 75 |   75% {
 76 |     -moz-transform: scale(0.5);
 77 |     -ms-transform: scale(0.5);
 78 |     -webkit-transform: scale(0.5);
 79 |     transform: scale(0.5);
 80 |     opacity: .5;
 81 |   }
 82 |   100% {
 83 |     -moz-transform: scale(1);
 84 |     -ms-transform: scale(1);
 85 |     -webkit-transform: scale(1);
 86 |     transform: scale(1);
 87 |     opacity: 0;
 88 |   }
 89 | }
 90 | @keyframes echo-loader {
 91 |   0% {
 92 |     -moz-transform: scale(0);
 93 |     -ms-transform: scale(0);
 94 |     -webkit-transform: scale(0);
 95 |     transform: scale(0);
 96 |     opacity: 0.0;
 97 |   }
 98 |   25% {
 99 |     -moz-transform: scale(0);
100 |     -ms-transform: scale(0);
101 |     -webkit-transform: scale(0);
102 |     transform: scale(0);
103 |     opacity: .1;
104 |   }
105 |   50% {
106 |     -moz-transform: scale(0.1);
107 |     -ms-transform: scale(0.1);
108 |     -webkit-transform: scale(0.1);
109 |     transform: scale(0.1);
110 |     opacity: .3;
111 |   }
112 |   75% {
113 |     -moz-transform: scale(0.5);
114 |     -ms-transform: scale(0.5);
115 |     -webkit-transform: scale(0.5);
116 |     transform: scale(0.5);
117 |     opacity: .5;
118 |   }
119 |   100% {
120 |     -moz-transform: scale(1);
121 |     -ms-transform: scale(1);
122 |     -webkit-transform: scale(1);
123 |     transform: scale(1);
124 |     opacity: 0;
125 |   }
126 | }
127 | 


--------------------------------------------------------------------------------
/css/spinner/flower.css:
--------------------------------------------------------------------------------
 1 | @-moz-keyframes flower-loader {
 2 |   0% {
 3 |     -moz-transform: rotate(0deg);
 4 |     transform: rotate(0deg);
 5 |     -moz-box-shadow: white 0 0 15px 0, #fd8 -12px -12px 0 4px, #fd8 12px -12px 0 4px, #fd8 12px 12px 0 4px, #fd8 -12px 12px 0 4px;
 6 |     box-shadow: white 0 0 15px 0, #fd8 -12px -12px 0 4px, #fd8 12px -12px 0 4px, #fd8 12px 12px 0 4px, #fd8 -12px 12px 0 4px;
 7 |   }
 8 |   50% {
 9 |     -moz-transform: rotate(1080deg);
10 |     transform: rotate(1080deg);
11 |     -moz-box-shadow: white 0 0 15px 0, #fd8 12px 12px 0 4px, #fd8 -12px 12px 0 4px, #fd8 -12px -12px 0 4px, #fd8 12px -12px 0 4px;
12 |     box-shadow: white 0 0 15px 0, #fd8 12px 12px 0 4px, #fd8 -12px 12px 0 4px, #fd8 -12px -12px 0 4px, #fd8 12px -12px 0 4px;
13 |   }
14 | }
15 | @-webkit-keyframes flower-loader {
16 |   0% {
17 |     -webkit-transform: rotate(0deg);
18 |     transform: rotate(0deg);
19 |     -webkit-box-shadow: white 0 0 15px 0, #fd8 -12px -12px 0 4px, #fd8 12px -12px 0 4px, #fd8 12px 12px 0 4px, #fd8 -12px 12px 0 4px;
20 |     box-shadow: white 0 0 15px 0, #fd8 -12px -12px 0 4px, #fd8 12px -12px 0 4px, #fd8 12px 12px 0 4px, #fd8 -12px 12px 0 4px;
21 |   }
22 |   50% {
23 |     -webkit-transform: rotate(1080deg);
24 |     transform: rotate(1080deg);
25 |     -webkit-box-shadow: white 0 0 15px 0, #fd8 12px 12px 0 4px, #fd8 -12px 12px 0 4px, #fd8 -12px -12px 0 4px, #fd8 12px -12px 0 4px;
26 |     box-shadow: white 0 0 15px 0, #fd8 12px 12px 0 4px, #fd8 -12px 12px 0 4px, #fd8 -12px -12px 0 4px, #fd8 12px -12px 0 4px;
27 |   }
28 | }
29 | @keyframes flower-loader {
30 |   0% {
31 |     -moz-transform: rotate(0deg);
32 |     -ms-transform: rotate(0deg);
33 |     -webkit-transform: rotate(0deg);
34 |     transform: rotate(0deg);
35 |     -moz-box-shadow: white 0 0 15px 0, #fd8 -12px -12px 0 4px, #fd8 12px -12px 0 4px, #fd8 12px 12px 0 4px, #fd8 -12px 12px 0 4px;
36 |     -webkit-box-shadow: white 0 0 15px 0, #fd8 -12px -12px 0 4px, #fd8 12px -12px 0 4px, #fd8 12px 12px 0 4px, #fd8 -12px 12px 0 4px;
37 |     box-shadow: white 0 0 15px 0, #fd8 -12px -12px 0 4px, #fd8 12px -12px 0 4px, #fd8 12px 12px 0 4px, #fd8 -12px 12px 0 4px;
38 |   }
39 |   50% {
40 |     -moz-transform: rotate(1080deg);
41 |     -ms-transform: rotate(1080deg);
42 |     -webkit-transform: rotate(1080deg);
43 |     transform: rotate(1080deg);
44 |     -moz-box-shadow: white 0 0 15px 0, #fd8 12px 12px 0 4px, #fd8 -12px 12px 0 4px, #fd8 -12px -12px 0 4px, #fd8 12px -12px 0 4px;
45 |     -webkit-box-shadow: white 0 0 15px 0, #fd8 12px 12px 0 4px, #fd8 -12px 12px 0 4px, #fd8 -12px -12px 0 4px, #fd8 12px -12px 0 4px;
46 |     box-shadow: white 0 0 15px 0, #fd8 12px 12px 0 4px, #fd8 -12px 12px 0 4px, #fd8 -12px -12px 0 4px, #fd8 12px -12px 0 4px;
47 |   }
48 | }
49 | /* :not(:required) hides this rule from IE9 and below */
50 | .flower-loader:not(:required) {
51 |   overflow: hidden;
52 |   position: relative;
53 |   text-indent: -9999px;
54 |   display: inline-block;
55 |   width: 16px;
56 |   height: 16px;
57 |   background: #e96;
58 |   border-radius: 100%;
59 |   -moz-box-shadow: white 0 0 15px 0, #fd8 -12px -12px 0 4px, #fd8 12px -12px 0 4px, #fd8 12px 12px 0 4px, #fd8 -12px 12px 0 4px;
60 |   -webkit-box-shadow: white 0 0 15px 0, #fd8 -12px -12px 0 4px, #fd8 12px -12px 0 4px, #fd8 12px 12px 0 4px, #fd8 -12px 12px 0 4px;
61 |   box-shadow: white 0 0 15px 0, #fd8 -12px -12px 0 4px, #fd8 12px -12px 0 4px, #fd8 12px 12px 0 4px, #fd8 -12px 12px 0 4px;
62 |   -moz-animation: flower-loader 5s infinite ease-in-out;
63 |   -webkit-animation: flower-loader 5s infinite ease-in-out;
64 |   animation: flower-loader 5s infinite ease-in-out;
65 |   -moz-transform-origin: 50% 50%;
66 |   -ms-transform-origin: 50% 50%;
67 |   -webkit-transform-origin: 50% 50%;
68 |   transform-origin: 50% 50%;
69 | }
70 | 


--------------------------------------------------------------------------------
/css/spinner/gauge.css:
--------------------------------------------------------------------------------
  1 | @-moz-keyframes gauge-loader {
  2 |   0% {
  3 |     -moz-transform: rotate(-50deg);
  4 |     transform: rotate(-50deg);
  5 |   }
  6 |   10% {
  7 |     -moz-transform: rotate(20deg);
  8 |     transform: rotate(20deg);
  9 |   }
 10 |   20% {
 11 |     -moz-transform: rotate(60deg);
 12 |     transform: rotate(60deg);
 13 |   }
 14 |   24% {
 15 |     -moz-transform: rotate(60deg);
 16 |     transform: rotate(60deg);
 17 |   }
 18 |   40% {
 19 |     -moz-transform: rotate(-20deg);
 20 |     transform: rotate(-20deg);
 21 |   }
 22 |   54% {
 23 |     -moz-transform: rotate(70deg);
 24 |     transform: rotate(70deg);
 25 |   }
 26 |   56% {
 27 |     -moz-transform: rotate(78deg);
 28 |     transform: rotate(78deg);
 29 |   }
 30 |   58% {
 31 |     -moz-transform: rotate(73deg);
 32 |     transform: rotate(73deg);
 33 |   }
 34 |   60% {
 35 |     -moz-transform: rotate(75deg);
 36 |     transform: rotate(75deg);
 37 |   }
 38 |   62% {
 39 |     -moz-transform: rotate(70deg);
 40 |     transform: rotate(70deg);
 41 |   }
 42 |   70% {
 43 |     -moz-transform: rotate(-20deg);
 44 |     transform: rotate(-20deg);
 45 |   }
 46 |   80% {
 47 |     -moz-transform: rotate(20deg);
 48 |     transform: rotate(20deg);
 49 |   }
 50 |   83% {
 51 |     -moz-transform: rotate(25deg);
 52 |     transform: rotate(25deg);
 53 |   }
 54 |   86% {
 55 |     -moz-transform: rotate(20deg);
 56 |     transform: rotate(20deg);
 57 |   }
 58 |   89% {
 59 |     -moz-transform: rotate(25deg);
 60 |     transform: rotate(25deg);
 61 |   }
 62 |   100% {
 63 |     -moz-transform: rotate(-50deg);
 64 |     transform: rotate(-50deg);
 65 |   }
 66 | }
 67 | @-webkit-keyframes gauge-loader {
 68 |   0% {
 69 |     -webkit-transform: rotate(-50deg);
 70 |     transform: rotate(-50deg);
 71 |   }
 72 |   10% {
 73 |     -webkit-transform: rotate(20deg);
 74 |     transform: rotate(20deg);
 75 |   }
 76 |   20% {
 77 |     -webkit-transform: rotate(60deg);
 78 |     transform: rotate(60deg);
 79 |   }
 80 |   24% {
 81 |     -webkit-transform: rotate(60deg);
 82 |     transform: rotate(60deg);
 83 |   }
 84 |   40% {
 85 |     -webkit-transform: rotate(-20deg);
 86 |     transform: rotate(-20deg);
 87 |   }
 88 |   54% {
 89 |     -webkit-transform: rotate(70deg);
 90 |     transform: rotate(70deg);
 91 |   }
 92 |   56% {
 93 |     -webkit-transform: rotate(78deg);
 94 |     transform: rotate(78deg);
 95 |   }
 96 |   58% {
 97 |     -webkit-transform: rotate(73deg);
 98 |     transform: rotate(73deg);
 99 |   }
100 |   60% {
101 |     -webkit-transform: rotate(75deg);
102 |     transform: rotate(75deg);
103 |   }
104 |   62% {
105 |     -webkit-transform: rotate(70deg);
106 |     transform: rotate(70deg);
107 |   }
108 |   70% {
109 |     -webkit-transform: rotate(-20deg);
110 |     transform: rotate(-20deg);
111 |   }
112 |   80% {
113 |     -webkit-transform: rotate(20deg);
114 |     transform: rotate(20deg);
115 |   }
116 |   83% {
117 |     -webkit-transform: rotate(25deg);
118 |     transform: rotate(25deg);
119 |   }
120 |   86% {
121 |     -webkit-transform: rotate(20deg);
122 |     transform: rotate(20deg);
123 |   }
124 |   89% {
125 |     -webkit-transform: rotate(25deg);
126 |     transform: rotate(25deg);
127 |   }
128 |   100% {
129 |     -webkit-transform: rotate(-50deg);
130 |     transform: rotate(-50deg);
131 |   }
132 | }
133 | @keyframes gauge-loader {
134 |   0% {
135 |     -moz-transform: rotate(-50deg);
136 |     -ms-transform: rotate(-50deg);
137 |     -webkit-transform: rotate(-50deg);
138 |     transform: rotate(-50deg);
139 |   }
140 |   10% {
141 |     -moz-transform: rotate(20deg);
142 |     -ms-transform: rotate(20deg);
143 |     -webkit-transform: rotate(20deg);
144 |     transform: rotate(20deg);
145 |   }
146 |   20% {
147 |     -moz-transform: rotate(60deg);
148 |     -ms-transform: rotate(60deg);
149 |     -webkit-transform: rotate(60deg);
150 |     transform: rotate(60deg);
151 |   }
152 |   24% {
153 |     -moz-transform: rotate(60deg);
154 |     -ms-transform: rotate(60deg);
155 |     -webkit-transform: rotate(60deg);
156 |     transform: rotate(60deg);
157 |   }
158 |   40% {
159 |     -moz-transform: rotate(-20deg);
160 |     -ms-transform: rotate(-20deg);
161 |     -webkit-transform: rotate(-20deg);
162 |     transform: rotate(-20deg);
163 |   }
164 |   54% {
165 |     -moz-transform: rotate(70deg);
166 |     -ms-transform: rotate(70deg);
167 |     -webkit-transform: rotate(70deg);
168 |     transform: rotate(70deg);
169 |   }
170 |   56% {
171 |     -moz-transform: rotate(78deg);
172 |     -ms-transform: rotate(78deg);
173 |     -webkit-transform: rotate(78deg);
174 |     transform: rotate(78deg);
175 |   }
176 |   58% {
177 |     -moz-transform: rotate(73deg);
178 |     -ms-transform: rotate(73deg);
179 |     -webkit-transform: rotate(73deg);
180 |     transform: rotate(73deg);
181 |   }
182 |   60% {
183 |     -moz-transform: rotate(75deg);
184 |     -ms-transform: rotate(75deg);
185 |     -webkit-transform: rotate(75deg);
186 |     transform: rotate(75deg);
187 |   }
188 |   62% {
189 |     -moz-transform: rotate(70deg);
190 |     -ms-transform: rotate(70deg);
191 |     -webkit-transform: rotate(70deg);
192 |     transform: rotate(70deg);
193 |   }
194 |   70% {
195 |     -moz-transform: rotate(-20deg);
196 |     -ms-transform: rotate(-20deg);
197 |     -webkit-transform: rotate(-20deg);
198 |     transform: rotate(-20deg);
199 |   }
200 |   80% {
201 |     -moz-transform: rotate(20deg);
202 |     -ms-transform: rotate(20deg);
203 |     -webkit-transform: rotate(20deg);
204 |     transform: rotate(20deg);
205 |   }
206 |   83% {
207 |     -moz-transform: rotate(25deg);
208 |     -ms-transform: rotate(25deg);
209 |     -webkit-transform: rotate(25deg);
210 |     transform: rotate(25deg);
211 |   }
212 |   86% {
213 |     -moz-transform: rotate(20deg);
214 |     -ms-transform: rotate(20deg);
215 |     -webkit-transform: rotate(20deg);
216 |     transform: rotate(20deg);
217 |   }
218 |   89% {
219 |     -moz-transform: rotate(25deg);
220 |     -ms-transform: rotate(25deg);
221 |     -webkit-transform: rotate(25deg);
222 |     transform: rotate(25deg);
223 |   }
224 |   100% {
225 |     -moz-transform: rotate(-50deg);
226 |     -ms-transform: rotate(-50deg);
227 |     -webkit-transform: rotate(-50deg);
228 |     transform: rotate(-50deg);
229 |   }
230 | }
231 | /* :not(:required) hides this rule from IE9 and below */
232 | .gauge-loader:not(:required) {
233 |   background: #6ca;
234 |   -moz-border-radius-topleft: 32px;
235 |   -webkit-border-top-left-radius: 32px;
236 |   border-top-left-radius: 32px;
237 |   -moz-border-radius-topright: 32px;
238 |   -webkit-border-top-right-radius: 32px;
239 |   border-top-right-radius: 32px;
240 |   display: inline-block;
241 |   width: 64px;
242 |   height: 32px;
243 |   overflow: hidden;
244 |   position: relative;
245 |   text-indent: -9999px;
246 | }
247 | .gauge-loader:not(:required)::before {
248 |   -moz-animation: gauge-loader 4000ms infinite ease;
249 |   -webkit-animation: gauge-loader 4000ms infinite ease;
250 |   animation: gauge-loader 4000ms infinite ease;
251 |   background: white;
252 |   -moz-border-radius: 2px;
253 |   -webkit-border-radius: 2px;
254 |   border-radius: 2px;
255 |   content: '';
256 |   position: absolute;
257 |   left: 30px;
258 |   top: 5.33333px;
259 |   width: 4px;
260 |   height: 26.66667px;
261 |   -moz-transform-origin: 50% 100%;
262 |   -ms-transform-origin: 50% 100%;
263 |   -webkit-transform-origin: 50% 100%;
264 |   transform-origin: 50% 100%;
265 | }
266 | .gauge-loader:not(:required)::after {
267 |   content: '';
268 |   background: white;
269 |   -moz-border-radius: 8px;
270 |   -webkit-border-radius: 8px;
271 |   border-radius: 8px;
272 |   position: absolute;
273 |   left: 25.6px;
274 |   top: 25.6px;
275 |   width: 12.8px;
276 |   height: 12.8px;
277 | }
278 | 


--------------------------------------------------------------------------------
/css/spinner/heartbeat.css:
--------------------------------------------------------------------------------
  1 | @-moz-keyframes heartbeat-loader {
  2 |   0% {
  3 |     -moz-transform: rotate(45deg) scale(1);
  4 |     transform: rotate(45deg) scale(1);
  5 |   }
  6 |   14% {
  7 |     -moz-transform: rotate(45deg) scale(1.3);
  8 |     transform: rotate(45deg) scale(1.3);
  9 |   }
 10 |   28% {
 11 |     -moz-transform: rotate(45deg) scale(1);
 12 |     transform: rotate(45deg) scale(1);
 13 |   }
 14 |   42% {
 15 |     -moz-transform: rotate(45deg) scale(1.3);
 16 |     transform: rotate(45deg) scale(1.3);
 17 |   }
 18 |   70% {
 19 |     -moz-transform: rotate(45deg) scale(1);
 20 |     transform: rotate(45deg) scale(1);
 21 |   }
 22 | }
 23 | @-webkit-keyframes heartbeat-loader {
 24 |   0% {
 25 |     -webkit-transform: rotate(45deg) scale(1);
 26 |     transform: rotate(45deg) scale(1);
 27 |   }
 28 |   14% {
 29 |     -webkit-transform: rotate(45deg) scale(1.3);
 30 |     transform: rotate(45deg) scale(1.3);
 31 |   }
 32 |   28% {
 33 |     -webkit-transform: rotate(45deg) scale(1);
 34 |     transform: rotate(45deg) scale(1);
 35 |   }
 36 |   42% {
 37 |     -webkit-transform: rotate(45deg) scale(1.3);
 38 |     transform: rotate(45deg) scale(1.3);
 39 |   }
 40 |   70% {
 41 |     -webkit-transform: rotate(45deg) scale(1);
 42 |     transform: rotate(45deg) scale(1);
 43 |   }
 44 | }
 45 | @keyframes heartbeat-loader {
 46 |   0% {
 47 |     -moz-transform: rotate(45deg) scale(1);
 48 |     -ms-transform: rotate(45deg) scale(1);
 49 |     -webkit-transform: rotate(45deg) scale(1);
 50 |     transform: rotate(45deg) scale(1);
 51 |   }
 52 |   14% {
 53 |     -moz-transform: rotate(45deg) scale(1.3);
 54 |     -ms-transform: rotate(45deg) scale(1.3);
 55 |     -webkit-transform: rotate(45deg) scale(1.3);
 56 |     transform: rotate(45deg) scale(1.3);
 57 |   }
 58 |   28% {
 59 |     -moz-transform: rotate(45deg) scale(1);
 60 |     -ms-transform: rotate(45deg) scale(1);
 61 |     -webkit-transform: rotate(45deg) scale(1);
 62 |     transform: rotate(45deg) scale(1);
 63 |   }
 64 |   42% {
 65 |     -moz-transform: rotate(45deg) scale(1.3);
 66 |     -ms-transform: rotate(45deg) scale(1.3);
 67 |     -webkit-transform: rotate(45deg) scale(1.3);
 68 |     transform: rotate(45deg) scale(1.3);
 69 |   }
 70 |   70% {
 71 |     -moz-transform: rotate(45deg) scale(1);
 72 |     -ms-transform: rotate(45deg) scale(1);
 73 |     -webkit-transform: rotate(45deg) scale(1);
 74 |     transform: rotate(45deg) scale(1);
 75 |   }
 76 | }
 77 | /* :not(:required) hides this rule from IE9 and below */
 78 | .heartbeat-loader:not(:required) {
 79 |   -moz-animation: heartbeat-loader 1300ms ease 0s infinite normal;
 80 |   -webkit-animation: heartbeat-loader 1300ms ease 0s infinite normal;
 81 |   animation: heartbeat-loader 1300ms ease 0s infinite normal;
 82 |   display: inline-block;
 83 |   position: relative;
 84 |   overflow: hidden;
 85 |   text-indent: -9999px;
 86 |   width: 36px;
 87 |   height: 36px;
 88 |   -moz-transform: rotate(45deg) scale(1);
 89 |   -ms-transform: rotate(45deg) scale(1);
 90 |   -webkit-transform: rotate(45deg) scale(1);
 91 |   transform: rotate(45deg) scale(1);
 92 |   -moz-transform-origin: 50% 50%;
 93 |   -ms-transform-origin: 50% 50%;
 94 |   -webkit-transform-origin: 50% 50%;
 95 |   transform-origin: 50% 50%;
 96 | }
 97 | .heartbeat-loader:not(:required):after, .heartbeat-loader:not(:required):before {
 98 |   position: absolute;
 99 |   content: "";
100 |   background: #e87;
101 | }
102 | .heartbeat-loader:not(:required):before {
103 |   -moz-border-radius-topleft: 12px;
104 |   -webkit-border-top-left-radius: 12px;
105 |   border-top-left-radius: 12px;
106 |   -moz-border-radius-bottomleft: 12px;
107 |   -webkit-border-bottom-left-radius: 12px;
108 |   border-bottom-left-radius: 12px;
109 |   top: 12px;
110 |   left: 0;
111 |   width: 36px;
112 |   height: 24px;
113 | }
114 | .heartbeat-loader:not(:required):after {
115 |   -moz-border-radius-topleft: 12px;
116 |   -webkit-border-top-left-radius: 12px;
117 |   border-top-left-radius: 12px;
118 |   -moz-border-radius-topright: 12px;
119 |   -webkit-border-top-right-radius: 12px;
120 |   border-top-right-radius: 12px;
121 |   top: 0;
122 |   left: 12px;
123 |   width: 24px;
124 |   height: 12px;
125 | }
126 | 


--------------------------------------------------------------------------------
/css/spinner/hexdots.css:
--------------------------------------------------------------------------------
  1 | @-moz-keyframes hexdots-loader {
  2 |   0% {
  3 |     -moz-box-shadow: #666666 0 -30px 0 7px, #999 0 -30px 0 7px, #999 26px -15px 0 7px, #999 26px 15px 0 7px, #999 0 30px 0 7px, #999 -26px 15px 0 7px, #999 -26px -15px 0 7px;
  4 |     box-shadow: #666666 0 -30px 0 7px, #999 0 -30px 0 7px, #999 26px -15px 0 7px, #999 26px 15px 0 7px, #999 0 30px 0 7px, #999 -26px 15px 0 7px, #999 -26px -15px 0 7px;
  5 |   }
  6 |   8.33% {
  7 |     -moz-box-shadow: #666666 26px -15px 0 7px, #999 26px -15px 0 7px, #999 26px -15px 0 7px, #999 26px 15px 0 7px, #999 0 30px 0 7px, #999 -26px 15px 0 7px, #999 -26px -15px 0 7px;
  8 |     box-shadow: #666666 26px -15px 0 7px, #999 26px -15px 0 7px, #999 26px -15px 0 7px, #999 26px 15px 0 7px, #999 0 30px 0 7px, #999 -26px 15px 0 7px, #999 -26px -15px 0 7px;
  9 |   }
 10 |   16.67% {
 11 |     -moz-box-shadow: #666666 26px 15px 0 7px, #999 26px 15px 0 7px, #999 26px 15px 0 7px, #999 26px 15px 0 7px, #999 0 30px 0 7px, #999 -26px 15px 0 7px, #999 -26px -15px 0 7px;
 12 |     box-shadow: #666666 26px 15px 0 7px, #999 26px 15px 0 7px, #999 26px 15px 0 7px, #999 26px 15px 0 7px, #999 0 30px 0 7px, #999 -26px 15px 0 7px, #999 -26px -15px 0 7px;
 13 |   }
 14 |   25% {
 15 |     -moz-box-shadow: #666666 0 30px 0 7px, #999 0 30px 0 7px, #999 0 30px 0 7px, #999 0 30px 0 7px, #999 0 30px 0 7px, #999 -26px 15px 0 7px, #999 -26px -15px 0 7px;
 16 |     box-shadow: #666666 0 30px 0 7px, #999 0 30px 0 7px, #999 0 30px 0 7px, #999 0 30px 0 7px, #999 0 30px 0 7px, #999 -26px 15px 0 7px, #999 -26px -15px 0 7px;
 17 |   }
 18 |   33.33% {
 19 |     -moz-box-shadow: #666666 -26px 15px 0 7px, #999 -26px 15px 0 7px, #999 -26px 15px 0 7px, #999 -26px 15px 0 7px, #999 -26px 15px 0 7px, #999 -26px 15px 0 7px, #999 -26px -15px 0 7px;
 20 |     box-shadow: #666666 -26px 15px 0 7px, #999 -26px 15px 0 7px, #999 -26px 15px 0 7px, #999 -26px 15px 0 7px, #999 -26px 15px 0 7px, #999 -26px 15px 0 7px, #999 -26px -15px 0 7px;
 21 |   }
 22 |   41.67% {
 23 |     -moz-box-shadow: #666666 -26px -15px 0 7px, #999 -26px -15px 0 7px, #999 -26px -15px 0 7px, #999 -26px -15px 0 7px, #999 -26px -15px 0 7px, #999 -26px -15px 0 7px, #999 -26px -15px 0 7px;
 24 |     box-shadow: #666666 -26px -15px 0 7px, #999 -26px -15px 0 7px, #999 -26px -15px 0 7px, #999 -26px -15px 0 7px, #999 -26px -15px 0 7px, #999 -26px -15px 0 7px, #999 -26px -15px 0 7px;
 25 |   }
 26 |   50% {
 27 |     -moz-box-shadow: #666666 0 -30px 0 7px, #999 0 -30px 0 7px, #999 0 -30px 0 7px, #999 0 -30px 0 7px, #999 0 -30px 0 7px, #999 0 -30px 0 7px, #999 0 -30px 0 7px;
 28 |     box-shadow: #666666 0 -30px 0 7px, #999 0 -30px 0 7px, #999 0 -30px 0 7px, #999 0 -30px 0 7px, #999 0 -30px 0 7px, #999 0 -30px 0 7px, #999 0 -30px 0 7px;
 29 |   }
 30 |   58.33% {
 31 |     -moz-box-shadow: #666666 26px -15px 0 7px, #999 0 -30px 0 7px, #999 26px -15px 0 7px, #999 26px -15px 0 7px, #999 26px -15px 0 7px, #999 26px -15px 0 7px, #999 26px -15px 0 7px;
 32 |     box-shadow: #666666 26px -15px 0 7px, #999 0 -30px 0 7px, #999 26px -15px 0 7px, #999 26px -15px 0 7px, #999 26px -15px 0 7px, #999 26px -15px 0 7px, #999 26px -15px 0 7px;
 33 |   }
 34 |   66.67% {
 35 |     -moz-box-shadow: #666666 26px 15px 0 7px, #999 0 -30px 0 7px, #999 26px -15px 0 7px, #999 26px 15px 0 7px, #999 26px 15px 0 7px, #999 26px 15px 0 7px, #999 26px 15px 0 7px;
 36 |     box-shadow: #666666 26px 15px 0 7px, #999 0 -30px 0 7px, #999 26px -15px 0 7px, #999 26px 15px 0 7px, #999 26px 15px 0 7px, #999 26px 15px 0 7px, #999 26px 15px 0 7px;
 37 |   }
 38 |   75% {
 39 |     -moz-box-shadow: #666666 0 30px 0 7px, #999 0 -30px 0 7px, #999 26px -15px 0 7px, #999 26px 15px 0 7px, #999 0 30px 0 7px, #999 0 30px 0 7px, #999 0 30px 0 7px;
 40 |     box-shadow: #666666 0 30px 0 7px, #999 0 -30px 0 7px, #999 26px -15px 0 7px, #999 26px 15px 0 7px, #999 0 30px 0 7px, #999 0 30px 0 7px, #999 0 30px 0 7px;
 41 |   }
 42 |   83.33% {
 43 |     -moz-box-shadow: #666666 -26px 15px 0 7px, #999 0 -30px 0 7px, #999 26px -15px 0 7px, #999 26px 15px 0 7px, #999 0 30px 0 7px, #999 -26px 15px 0 7px, #999 -26px 15px 0 7px;
 44 |     box-shadow: #666666 -26px 15px 0 7px, #999 0 -30px 0 7px, #999 26px -15px 0 7px, #999 26px 15px 0 7px, #999 0 30px 0 7px, #999 -26px 15px 0 7px, #999 -26px 15px 0 7px;
 45 |   }
 46 |   91.67% {
 47 |     -moz-box-shadow: #666666 -26px -15px 0 7px, #999 0 -30px 0 7px, #999 26px -15px 0 7px, #999 26px 15px 0 7px, #999 0 30px 0 7px, #999 -26px 15px 0 7px, #999 -26px -15px 0 7px;
 48 |     box-shadow: #666666 -26px -15px 0 7px, #999 0 -30px 0 7px, #999 26px -15px 0 7px, #999 26px 15px 0 7px, #999 0 30px 0 7px, #999 -26px 15px 0 7px, #999 -26px -15px 0 7px;
 49 |   }
 50 |   100% {
 51 |     -moz-box-shadow: #666666 0 -30px 0 7px, #999 0 -30px 0 7px, #999 26px -15px 0 7px, #999 26px 15px 0 7px, #999 0 30px 0 7px, #999 -26px 15px 0 7px, #999 -26px -15px 0 7px;
 52 |     box-shadow: #666666 0 -30px 0 7px, #999 0 -30px 0 7px, #999 26px -15px 0 7px, #999 26px 15px 0 7px, #999 0 30px 0 7px, #999 -26px 15px 0 7px, #999 -26px -15px 0 7px;
 53 |   }
 54 | }
 55 | @-webkit-keyframes hexdots-loader {
 56 |   0% {
 57 |     -webkit-box-shadow: #666666 0 -30px 0 7px, #999 0 -30px 0 7px, #999 26px -15px 0 7px, #999 26px 15px 0 7px, #999 0 30px 0 7px, #999 -26px 15px 0 7px, #999 -26px -15px 0 7px;
 58 |     box-shadow: #666666 0 -30px 0 7px, #999 0 -30px 0 7px, #999 26px -15px 0 7px, #999 26px 15px 0 7px, #999 0 30px 0 7px, #999 -26px 15px 0 7px, #999 -26px -15px 0 7px;
 59 |   }
 60 |   8.33% {
 61 |     -webkit-box-shadow: #666666 26px -15px 0 7px, #999 26px -15px 0 7px, #999 26px -15px 0 7px, #999 26px 15px 0 7px, #999 0 30px 0 7px, #999 -26px 15px 0 7px, #999 -26px -15px 0 7px;
 62 |     box-shadow: #666666 26px -15px 0 7px, #999 26px -15px 0 7px, #999 26px -15px 0 7px, #999 26px 15px 0 7px, #999 0 30px 0 7px, #999 -26px 15px 0 7px, #999 -26px -15px 0 7px;
 63 |   }
 64 |   16.67% {
 65 |     -webkit-box-shadow: #666666 26px 15px 0 7px, #999 26px 15px 0 7px, #999 26px 15px 0 7px, #999 26px 15px 0 7px, #999 0 30px 0 7px, #999 -26px 15px 0 7px, #999 -26px -15px 0 7px;
 66 |     box-shadow: #666666 26px 15px 0 7px, #999 26px 15px 0 7px, #999 26px 15px 0 7px, #999 26px 15px 0 7px, #999 0 30px 0 7px, #999 -26px 15px 0 7px, #999 -26px -15px 0 7px;
 67 |   }
 68 |   25% {
 69 |     -webkit-box-shadow: #666666 0 30px 0 7px, #999 0 30px 0 7px, #999 0 30px 0 7px, #999 0 30px 0 7px, #999 0 30px 0 7px, #999 -26px 15px 0 7px, #999 -26px -15px 0 7px;
 70 |     box-shadow: #666666 0 30px 0 7px, #999 0 30px 0 7px, #999 0 30px 0 7px, #999 0 30px 0 7px, #999 0 30px 0 7px, #999 -26px 15px 0 7px, #999 -26px -15px 0 7px;
 71 |   }
 72 |   33.33% {
 73 |     -webkit-box-shadow: #666666 -26px 15px 0 7px, #999 -26px 15px 0 7px, #999 -26px 15px 0 7px, #999 -26px 15px 0 7px, #999 -26px 15px 0 7px, #999 -26px 15px 0 7px, #999 -26px -15px 0 7px;
 74 |     box-shadow: #666666 -26px 15px 0 7px, #999 -26px 15px 0 7px, #999 -26px 15px 0 7px, #999 -26px 15px 0 7px, #999 -26px 15px 0 7px, #999 -26px 15px 0 7px, #999 -26px -15px 0 7px;
 75 |   }
 76 |   41.67% {
 77 |     -webkit-box-shadow: #666666 -26px -15px 0 7px, #999 -26px -15px 0 7px, #999 -26px -15px 0 7px, #999 -26px -15px 0 7px, #999 -26px -15px 0 7px, #999 -26px -15px 0 7px, #999 -26px -15px 0 7px;
 78 |     box-shadow: #666666 -26px -15px 0 7px, #999 -26px -15px 0 7px, #999 -26px -15px 0 7px, #999 -26px -15px 0 7px, #999 -26px -15px 0 7px, #999 -26px -15px 0 7px, #999 -26px -15px 0 7px;
 79 |   }
 80 |   50% {
 81 |     -webkit-box-shadow: #666666 0 -30px 0 7px, #999 0 -30px 0 7px, #999 0 -30px 0 7px, #999 0 -30px 0 7px, #999 0 -30px 0 7px, #999 0 -30px 0 7px, #999 0 -30px 0 7px;
 82 |     box-shadow: #666666 0 -30px 0 7px, #999 0 -30px 0 7px, #999 0 -30px 0 7px, #999 0 -30px 0 7px, #999 0 -30px 0 7px, #999 0 -30px 0 7px, #999 0 -30px 0 7px;
 83 |   }
 84 |   58.33% {
 85 |     -webkit-box-shadow: #666666 26px -15px 0 7px, #999 0 -30px 0 7px, #999 26px -15px 0 7px, #999 26px -15px 0 7px, #999 26px -15px 0 7px, #999 26px -15px 0 7px, #999 26px -15px 0 7px;
 86 |     box-shadow: #666666 26px -15px 0 7px, #999 0 -30px 0 7px, #999 26px -15px 0 7px, #999 26px -15px 0 7px, #999 26px -15px 0 7px, #999 26px -15px 0 7px, #999 26px -15px 0 7px;
 87 |   }
 88 |   66.67% {
 89 |     -webkit-box-shadow: #666666 26px 15px 0 7px, #999 0 -30px 0 7px, #999 26px -15px 0 7px, #999 26px 15px 0 7px, #999 26px 15px 0 7px, #999 26px 15px 0 7px, #999 26px 15px 0 7px;
 90 |     box-shadow: #666666 26px 15px 0 7px, #999 0 -30px 0 7px, #999 26px -15px 0 7px, #999 26px 15px 0 7px, #999 26px 15px 0 7px, #999 26px 15px 0 7px, #999 26px 15px 0 7px;
 91 |   }
 92 |   75% {
 93 |     -webkit-box-shadow: #666666 0 30px 0 7px, #999 0 -30px 0 7px, #999 26px -15px 0 7px, #999 26px 15px 0 7px, #999 0 30px 0 7px, #999 0 30px 0 7px, #999 0 30px 0 7px;
 94 |     box-shadow: #666666 0 30px 0 7px, #999 0 -30px 0 7px, #999 26px -15px 0 7px, #999 26px 15px 0 7px, #999 0 30px 0 7px, #999 0 30px 0 7px, #999 0 30px 0 7px;
 95 |   }
 96 |   83.33% {
 97 |     -webkit-box-shadow: #666666 -26px 15px 0 7px, #999 0 -30px 0 7px, #999 26px -15px 0 7px, #999 26px 15px 0 7px, #999 0 30px 0 7px, #999 -26px 15px 0 7px, #999 -26px 15px 0 7px;
 98 |     box-shadow: #666666 -26px 15px 0 7px, #999 0 -30px 0 7px, #999 26px -15px 0 7px, #999 26px 15px 0 7px, #999 0 30px 0 7px, #999 -26px 15px 0 7px, #999 -26px 15px 0 7px;
 99 |   }
100 |   91.67% {
101 |     -webkit-box-shadow: #666666 -26px -15px 0 7px, #999 0 -30px 0 7px, #999 26px -15px 0 7px, #999 26px 15px 0 7px, #999 0 30px 0 7px, #999 -26px 15px 0 7px, #999 -26px -15px 0 7px;
102 |     box-shadow: #666666 -26px -15px 0 7px, #999 0 -30px 0 7px, #999 26px -15px 0 7px, #999 26px 15px 0 7px, #999 0 30px 0 7px, #999 -26px 15px 0 7px, #999 -26px -15px 0 7px;
103 |   }
104 |   100% {
105 |     -webkit-box-shadow: #666666 0 -30px 0 7px, #999 0 -30px 0 7px, #999 26px -15px 0 7px, #999 26px 15px 0 7px, #999 0 30px 0 7px, #999 -26px 15px 0 7px, #999 -26px -15px 0 7px;
106 |     box-shadow: #666666 0 -30px 0 7px, #999 0 -30px 0 7px, #999 26px -15px 0 7px, #999 26px 15px 0 7px, #999 0 30px 0 7px, #999 -26px 15px 0 7px, #999 -26px -15px 0 7px;
107 |   }
108 | }
109 | @keyframes hexdots-loader {
110 |   0% {
111 |     -moz-box-shadow: #666666 0 -30px 0 7px, #999 0 -30px 0 7px, #999 26px -15px 0 7px, #999 26px 15px 0 7px, #999 0 30px 0 7px, #999 -26px 15px 0 7px, #999 -26px -15px 0 7px;
112 |     -webkit-box-shadow: #666666 0 -30px 0 7px, #999 0 -30px 0 7px, #999 26px -15px 0 7px, #999 26px 15px 0 7px, #999 0 30px 0 7px, #999 -26px 15px 0 7px, #999 -26px -15px 0 7px;
113 |     box-shadow: #666666 0 -30px 0 7px, #999 0 -30px 0 7px, #999 26px -15px 0 7px, #999 26px 15px 0 7px, #999 0 30px 0 7px, #999 -26px 15px 0 7px, #999 -26px -15px 0 7px;
114 |   }
115 |   8.33% {
116 |     -moz-box-shadow: #666666 26px -15px 0 7px, #999 26px -15px 0 7px, #999 26px -15px 0 7px, #999 26px 15px 0 7px, #999 0 30px 0 7px, #999 -26px 15px 0 7px, #999 -26px -15px 0 7px;
117 |     -webkit-box-shadow: #666666 26px -15px 0 7px, #999 26px -15px 0 7px, #999 26px -15px 0 7px, #999 26px 15px 0 7px, #999 0 30px 0 7px, #999 -26px 15px 0 7px, #999 -26px -15px 0 7px;
118 |     box-shadow: #666666 26px -15px 0 7px, #999 26px -15px 0 7px, #999 26px -15px 0 7px, #999 26px 15px 0 7px, #999 0 30px 0 7px, #999 -26px 15px 0 7px, #999 -26px -15px 0 7px;
119 |   }
120 |   16.67% {
121 |     -moz-box-shadow: #666666 26px 15px 0 7px, #999 26px 15px 0 7px, #999 26px 15px 0 7px, #999 26px 15px 0 7px, #999 0 30px 0 7px, #999 -26px 15px 0 7px, #999 -26px -15px 0 7px;
122 |     -webkit-box-shadow: #666666 26px 15px 0 7px, #999 26px 15px 0 7px, #999 26px 15px 0 7px, #999 26px 15px 0 7px, #999 0 30px 0 7px, #999 -26px 15px 0 7px, #999 -26px -15px 0 7px;
123 |     box-shadow: #666666 26px 15px 0 7px, #999 26px 15px 0 7px, #999 26px 15px 0 7px, #999 26px 15px 0 7px, #999 0 30px 0 7px, #999 -26px 15px 0 7px, #999 -26px -15px 0 7px;
124 |   }
125 |   25% {
126 |     -moz-box-shadow: #666666 0 30px 0 7px, #999 0 30px 0 7px, #999 0 30px 0 7px, #999 0 30px 0 7px, #999 0 30px 0 7px, #999 -26px 15px 0 7px, #999 -26px -15px 0 7px;
127 |     -webkit-box-shadow: #666666 0 30px 0 7px, #999 0 30px 0 7px, #999 0 30px 0 7px, #999 0 30px 0 7px, #999 0 30px 0 7px, #999 -26px 15px 0 7px, #999 -26px -15px 0 7px;
128 |     box-shadow: #666666 0 30px 0 7px, #999 0 30px 0 7px, #999 0 30px 0 7px, #999 0 30px 0 7px, #999 0 30px 0 7px, #999 -26px 15px 0 7px, #999 -26px -15px 0 7px;
129 |   }
130 |   33.33% {
131 |     -moz-box-shadow: #666666 -26px 15px 0 7px, #999 -26px 15px 0 7px, #999 -26px 15px 0 7px, #999 -26px 15px 0 7px, #999 -26px 15px 0 7px, #999 -26px 15px 0 7px, #999 -26px -15px 0 7px;
132 |     -webkit-box-shadow: #666666 -26px 15px 0 7px, #999 -26px 15px 0 7px, #999 -26px 15px 0 7px, #999 -26px 15px 0 7px, #999 -26px 15px 0 7px, #999 -26px 15px 0 7px, #999 -26px -15px 0 7px;
133 |     box-shadow: #666666 -26px 15px 0 7px, #999 -26px 15px 0 7px, #999 -26px 15px 0 7px, #999 -26px 15px 0 7px, #999 -26px 15px 0 7px, #999 -26px 15px 0 7px, #999 -26px -15px 0 7px;
134 |   }
135 |   41.67% {
136 |     -moz-box-shadow: #666666 -26px -15px 0 7px, #999 -26px -15px 0 7px, #999 -26px -15px 0 7px, #999 -26px -15px 0 7px, #999 -26px -15px 0 7px, #999 -26px -15px 0 7px, #999 -26px -15px 0 7px;
137 |     -webkit-box-shadow: #666666 -26px -15px 0 7px, #999 -26px -15px 0 7px, #999 -26px -15px 0 7px, #999 -26px -15px 0 7px, #999 -26px -15px 0 7px, #999 -26px -15px 0 7px, #999 -26px -15px 0 7px;
138 |     box-shadow: #666666 -26px -15px 0 7px, #999 -26px -15px 0 7px, #999 -26px -15px 0 7px, #999 -26px -15px 0 7px, #999 -26px -15px 0 7px, #999 -26px -15px 0 7px, #999 -26px -15px 0 7px;
139 |   }
140 |   50% {
141 |     -moz-box-shadow: #666666 0 -30px 0 7px, #999 0 -30px 0 7px, #999 0 -30px 0 7px, #999 0 -30px 0 7px, #999 0 -30px 0 7px, #999 0 -30px 0 7px, #999 0 -30px 0 7px;
142 |     -webkit-box-shadow: #666666 0 -30px 0 7px, #999 0 -30px 0 7px, #999 0 -30px 0 7px, #999 0 -30px 0 7px, #999 0 -30px 0 7px, #999 0 -30px 0 7px, #999 0 -30px 0 7px;
143 |     box-shadow: #666666 0 -30px 0 7px, #999 0 -30px 0 7px, #999 0 -30px 0 7px, #999 0 -30px 0 7px, #999 0 -30px 0 7px, #999 0 -30px 0 7px, #999 0 -30px 0 7px;
144 |   }
145 |   58.33% {
146 |     -moz-box-shadow: #666666 26px -15px 0 7px, #999 0 -30px 0 7px, #999 26px -15px 0 7px, #999 26px -15px 0 7px, #999 26px -15px 0 7px, #999 26px -15px 0 7px, #999 26px -15px 0 7px;
147 |     -webkit-box-shadow: #666666 26px -15px 0 7px, #999 0 -30px 0 7px, #999 26px -15px 0 7px, #999 26px -15px 0 7px, #999 26px -15px 0 7px, #999 26px -15px 0 7px, #999 26px -15px 0 7px;
148 |     box-shadow: #666666 26px -15px 0 7px, #999 0 -30px 0 7px, #999 26px -15px 0 7px, #999 26px -15px 0 7px, #999 26px -15px 0 7px, #999 26px -15px 0 7px, #999 26px -15px 0 7px;
149 |   }
150 |   66.67% {
151 |     -moz-box-shadow: #666666 26px 15px 0 7px, #999 0 -30px 0 7px, #999 26px -15px 0 7px, #999 26px 15px 0 7px, #999 26px 15px 0 7px, #999 26px 15px 0 7px, #999 26px 15px 0 7px;
152 |     -webkit-box-shadow: #666666 26px 15px 0 7px, #999 0 -30px 0 7px, #999 26px -15px 0 7px, #999 26px 15px 0 7px, #999 26px 15px 0 7px, #999 26px 15px 0 7px, #999 26px 15px 0 7px;
153 |     box-shadow: #666666 26px 15px 0 7px, #999 0 -30px 0 7px, #999 26px -15px 0 7px, #999 26px 15px 0 7px, #999 26px 15px 0 7px, #999 26px 15px 0 7px, #999 26px 15px 0 7px;
154 |   }
155 |   75% {
156 |     -moz-box-shadow: #666666 0 30px 0 7px, #999 0 -30px 0 7px, #999 26px -15px 0 7px, #999 26px 15px 0 7px, #999 0 30px 0 7px, #999 0 30px 0 7px, #999 0 30px 0 7px;
157 |     -webkit-box-shadow: #666666 0 30px 0 7px, #999 0 -30px 0 7px, #999 26px -15px 0 7px, #999 26px 15px 0 7px, #999 0 30px 0 7px, #999 0 30px 0 7px, #999 0 30px 0 7px;
158 |     box-shadow: #666666 0 30px 0 7px, #999 0 -30px 0 7px, #999 26px -15px 0 7px, #999 26px 15px 0 7px, #999 0 30px 0 7px, #999 0 30px 0 7px, #999 0 30px 0 7px;
159 |   }
160 |   83.33% {
161 |     -moz-box-shadow: #666666 -26px 15px 0 7px, #999 0 -30px 0 7px, #999 26px -15px 0 7px, #999 26px 15px 0 7px, #999 0 30px 0 7px, #999 -26px 15px 0 7px, #999 -26px 15px 0 7px;
162 |     -webkit-box-shadow: #666666 -26px 15px 0 7px, #999 0 -30px 0 7px, #999 26px -15px 0 7px, #999 26px 15px 0 7px, #999 0 30px 0 7px, #999 -26px 15px 0 7px, #999 -26px 15px 0 7px;
163 |     box-shadow: #666666 -26px 15px 0 7px, #999 0 -30px 0 7px, #999 26px -15px 0 7px, #999 26px 15px 0 7px, #999 0 30px 0 7px, #999 -26px 15px 0 7px, #999 -26px 15px 0 7px;
164 |   }
165 |   91.67% {
166 |     -moz-box-shadow: #666666 -26px -15px 0 7px, #999 0 -30px 0 7px, #999 26px -15px 0 7px, #999 26px 15px 0 7px, #999 0 30px 0 7px, #999 -26px 15px 0 7px, #999 -26px -15px 0 7px;
167 |     -webkit-box-shadow: #666666 -26px -15px 0 7px, #999 0 -30px 0 7px, #999 26px -15px 0 7px, #999 26px 15px 0 7px, #999 0 30px 0 7px, #999 -26px 15px 0 7px, #999 -26px -15px 0 7px;
168 |     box-shadow: #666666 -26px -15px 0 7px, #999 0 -30px 0 7px, #999 26px -15px 0 7px, #999 26px 15px 0 7px, #999 0 30px 0 7px, #999 -26px 15px 0 7px, #999 -26px -15px 0 7px;
169 |   }
170 |   100% {
171 |     -moz-box-shadow: #666666 0 -30px 0 7px, #999 0 -30px 0 7px, #999 26px -15px 0 7px, #999 26px 15px 0 7px, #999 0 30px 0 7px, #999 -26px 15px 0 7px, #999 -26px -15px 0 7px;
172 |     -webkit-box-shadow: #666666 0 -30px 0 7px, #999 0 -30px 0 7px, #999 26px -15px 0 7px, #999 26px 15px 0 7px, #999 0 30px 0 7px, #999 -26px 15px 0 7px, #999 -26px -15px 0 7px;
173 |     box-shadow: #666666 0 -30px 0 7px, #999 0 -30px 0 7px, #999 26px -15px 0 7px, #999 26px 15px 0 7px, #999 0 30px 0 7px, #999 -26px 15px 0 7px, #999 -26px -15px 0 7px;
174 |   }
175 | }
176 | /* :not(:required) hides this rule from IE9 and below */
177 | .hexdots-loader:not(:required) {
178 |   overflow: hidden;
179 |   position: relative;
180 |   text-indent: -9999px;
181 |   display: inline-block;
182 |   width: 7px;
183 |   height: 7px;
184 |   background: transparent;
185 |   border-radius: 100%;
186 |   -moz-box-shadow: #666666 0 -30px 0 7px, #999 26px -15px 0 7px, #999 26px 15px 0 7px, #999 0 30px 0 7px, #999 0 30px 0 7px, #999 0 30px 0 7px;
187 |   -webkit-box-shadow: #666666 0 -30px 0 7px, #999 26px -15px 0 7px, #999 26px 15px 0 7px, #999 0 30px 0 7px, #999 0 30px 0 7px, #999 0 30px 0 7px;
188 |   box-shadow: #666666 0 -30px 0 7px, #999 26px -15px 0 7px, #999 26px 15px 0 7px, #999 0 30px 0 7px, #999 0 30px 0 7px, #999 0 30px 0 7px;
189 |   -moz-animation: hexdots-loader 5s infinite ease-in-out;
190 |   -webkit-animation: hexdots-loader 5s infinite ease-in-out;
191 |   animation: hexdots-loader 5s infinite ease-in-out;
192 |   -moz-transform-origin: 50% 50%;
193 |   -ms-transform-origin: 50% 50%;
194 |   -webkit-transform-origin: 50% 50%;
195 |   transform-origin: 50% 50%;
196 | }
197 | 


--------------------------------------------------------------------------------
/css/spinner/hole-pulse.css:
--------------------------------------------------------------------------------
 1 | .hole-pulse-loader:not(:required) {
 2 |   display: inline-block;
 3 |   width: 50px;
 4 |   height: 50px;
 5 |   -moz-animation: pulse-loader 0.7s infinite alternate;
 6 |   -webkit-animation: pulse-loader 0.7s infinite alternate;
 7 |   animation: pulse-loader 0.7s infinite alternate;
 8 |   border: 2px solid #e67e22;
 9 |   -moz-border-radius: 50%;
10 |   -webkit-border-radius: 50%;
11 |   border-radius: 50%;
12 |   overflow: hidden;
13 |   text-indent: 50px;
14 | }
15 | 
16 | @-moz-keyframes pulse-loader {
17 |   0% {
18 |     -moz-box-shadow: #e67e22 0 0 0px 20px;
19 |     box-shadow: #e67e22 0 0 0px 20px;
20 |   }
21 |   40% {
22 |     -moz-box-shadow: none;
23 |     box-shadow: none;
24 |   }
25 |   100% {
26 |     -moz-box-shadow: #e67e22 0 0 0px 25px inset;
27 |     box-shadow: #e67e22 0 0 0px 25px inset;
28 |   }
29 | }
30 | @-webkit-keyframes pulse-loader {
31 |   0% {
32 |     -webkit-box-shadow: #e67e22 0 0 0px 20px;
33 |     box-shadow: #e67e22 0 0 0px 20px;
34 |   }
35 |   40% {
36 |     -webkit-box-shadow: none;
37 |     box-shadow: none;
38 |   }
39 |   100% {
40 |     -webkit-box-shadow: #e67e22 0 0 0px 25px inset;
41 |     box-shadow: #e67e22 0 0 0px 25px inset;
42 |   }
43 | }
44 | @keyframes pulse-loader {
45 |   0% {
46 |     -moz-box-shadow: #e67e22 0 0 0px 20px;
47 |     -webkit-box-shadow: #e67e22 0 0 0px 20px;
48 |     box-shadow: #e67e22 0 0 0px 20px;
49 |   }
50 |   40% {
51 |     -moz-box-shadow: none;
52 |     -webkit-box-shadow: none;
53 |     box-shadow: none;
54 |   }
55 |   100% {
56 |     -moz-box-shadow: #e67e22 0 0 0px 25px inset;
57 |     -webkit-box-shadow: #e67e22 0 0 0px 25px inset;
58 |     box-shadow: #e67e22 0 0 0px 25px inset;
59 |   }
60 | }
61 | 


--------------------------------------------------------------------------------
/css/spinner/inner-circles.css:
--------------------------------------------------------------------------------
 1 | /* :not(:required) hides this rule from IE9 and below */
 2 | .inner-circles-loader:not(:required) {
 3 |   -moz-transform: translate3d(0, 0, 0);
 4 |   -ms-transform: translate3d(0, 0, 0);
 5 |   -webkit-transform: translate3d(0, 0, 0);
 6 |   transform: translate3d(0, 0, 0);
 7 |   position: relative;
 8 |   display: inline-block;
 9 |   width: 50px;
10 |   height: 50px;
11 |   background: rgba(25, 165, 152, 0.5);
12 |   border-radius: 50%;
13 |   overflow: hidden;
14 |   text-indent: -9999px;
15 |   /* Hides inner circles outside base circle at safari */
16 |   -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
17 | }
18 | .inner-circles-loader:not(:required):before, .inner-circles-loader:not(:required):after {
19 |   content: '';
20 |   position: absolute;
21 |   top: 0;
22 |   display: inline-block;
23 |   width: 50px;
24 |   height: 50px;
25 |   border-radius: 50%;
26 | }
27 | .inner-circles-loader:not(:required):before {
28 |   -moz-animation: inner-circles-loader 3s infinite;
29 |   -webkit-animation: inner-circles-loader 3s infinite;
30 |   animation: inner-circles-loader 3s infinite;
31 |   -moz-transform-origin: 0 50%;
32 |   -ms-transform-origin: 0 50%;
33 |   -webkit-transform-origin: 0 50%;
34 |   transform-origin: 0 50%;
35 |   left: 0;
36 |   background: #c7efcf;
37 | }
38 | .inner-circles-loader:not(:required):after {
39 |   -moz-animation: inner-circles-loader 3s 0.2s reverse infinite;
40 |   -webkit-animation: inner-circles-loader 3s 0.2s reverse infinite;
41 |   animation: inner-circles-loader 3s 0.2s reverse infinite;
42 |   -moz-transform-origin: 100% 50%;
43 |   -ms-transform-origin: 100% 50%;
44 |   -webkit-transform-origin: 100% 50%;
45 |   transform-origin: 100% 50%;
46 |   right: 0;
47 |   background: #eef5db;
48 | }
49 | 
50 | @-moz-keyframes inner-circles-loader {
51 |   0% {
52 |     -moz-transform: rotate(0deg);
53 |     transform: rotate(0deg);
54 |   }
55 |   50% {
56 |     -moz-transform: rotate(360deg);
57 |     transform: rotate(360deg);
58 |   }
59 |   100% {
60 |     -moz-transform: rotate(0deg);
61 |     transform: rotate(0deg);
62 |   }
63 | }
64 | @-webkit-keyframes inner-circles-loader {
65 |   0% {
66 |     -webkit-transform: rotate(0deg);
67 |     transform: rotate(0deg);
68 |   }
69 |   50% {
70 |     -webkit-transform: rotate(360deg);
71 |     transform: rotate(360deg);
72 |   }
73 |   100% {
74 |     -webkit-transform: rotate(0deg);
75 |     transform: rotate(0deg);
76 |   }
77 | }
78 | @keyframes inner-circles-loader {
79 |   0% {
80 |     -moz-transform: rotate(0deg);
81 |     -ms-transform: rotate(0deg);
82 |     -webkit-transform: rotate(0deg);
83 |     transform: rotate(0deg);
84 |   }
85 |   50% {
86 |     -moz-transform: rotate(360deg);
87 |     -ms-transform: rotate(360deg);
88 |     -webkit-transform: rotate(360deg);
89 |     transform: rotate(360deg);
90 |   }
91 |   100% {
92 |     -moz-transform: rotate(0deg);
93 |     -ms-transform: rotate(0deg);
94 |     -webkit-transform: rotate(0deg);
95 |     transform: rotate(0deg);
96 |   }
97 | }
98 | 


--------------------------------------------------------------------------------
/css/spinner/plus-loader.css:
--------------------------------------------------------------------------------
 1 | /*
 2 | Syntax error: Undefined mixin 'keyframes'.
 3 |         on line 11 of /Users/jlong/Workspaces/spinners/sass/spinner/plus-loader.scss, in `keyframes'
 4 |         from line 11 of /Users/jlong/Workspaces/spinners/sass/spinner/plus-loader.scss
 5 | 
 6 | Backtrace:
 7 | /Users/jlong/Workspaces/spinners/sass/spinner/plus-loader.scss:11:in `keyframes'
 8 | /Users/jlong/Workspaces/spinners/sass/spinner/plus-loader.scss:11
 9 | /Users/jlong/.rvm/gems/ruby-2.0.0-p0/gems/sass-3.2.8/lib/sass/tree/visitors/perform.rb:253:in `visit_mixin'
10 | /Users/jlong/.rvm/gems/ruby-2.0.0-p0/gems/sass-3.2.8/lib/sass/tree/visitors/base.rb:37:in `visit'
11 | /Users/jlong/.rvm/gems/ruby-2.0.0-p0/gems/sass-3.2.8/lib/sass/tree/visitors/perform.rb:100:in `visit'
12 | /Users/jlong/.rvm/gems/ruby-2.0.0-p0/gems/sass-3.2.8/lib/sass/tree/visitors/base.rb:53:in `block in visit_children'
13 | /Users/jlong/.rvm/gems/ruby-2.0.0-p0/gems/sass-3.2.8/lib/sass/tree/visitors/base.rb:53:in `map'
14 | /Users/jlong/.rvm/gems/ruby-2.0.0-p0/gems/sass-3.2.8/lib/sass/tree/visitors/base.rb:53:in `visit_children'
15 | /Users/jlong/.rvm/gems/ruby-2.0.0-p0/gems/sass-3.2.8/lib/sass/tree/visitors/perform.rb:109:in `block in visit_children'
16 | /Users/jlong/.rvm/gems/ruby-2.0.0-p0/gems/sass-3.2.8/lib/sass/tree/visitors/perform.rb:121:in `with_environment'
17 | /Users/jlong/.rvm/gems/ruby-2.0.0-p0/gems/sass-3.2.8/lib/sass/tree/visitors/perform.rb:108:in `visit_children'
18 | /Users/jlong/.rvm/gems/ruby-2.0.0-p0/gems/sass-3.2.8/lib/sass/tree/visitors/base.rb:37:in `block in visit'
19 | /Users/jlong/.rvm/gems/ruby-2.0.0-p0/gems/sass-3.2.8/lib/sass/tree/visitors/perform.rb:128:in `visit_root'
20 | /Users/jlong/.rvm/gems/ruby-2.0.0-p0/gems/sass-3.2.8/lib/sass/tree/visitors/base.rb:37:in `visit'
21 | /Users/jlong/.rvm/gems/ruby-2.0.0-p0/gems/sass-3.2.8/lib/sass/tree/visitors/perform.rb:100:in `visit'
22 | /Users/jlong/.rvm/gems/ruby-2.0.0-p0/gems/sass-3.2.8/lib/sass/tree/visitors/perform.rb:7:in `visit'
23 | /Users/jlong/.rvm/gems/ruby-2.0.0-p0/gems/sass-3.2.8/lib/sass/tree/root_node.rb:20:in `render'
24 | /Users/jlong/.rvm/gems/ruby-2.0.0-p0/gems/sass-3.2.8/lib/sass/engine.rb:315:in `_render'
25 | /Users/jlong/.rvm/gems/ruby-2.0.0-p0/gems/sass-3.2.8/lib/sass/engine.rb:262:in `render'
26 | /Users/jlong/.rvm/gems/ruby-2.0.0-p0/gems/compass-0.12.2/lib/compass/compiler.rb:140:in `block (2 levels) in compile'
27 | /Users/jlong/.rvm/gems/ruby-2.0.0-p0/gems/compass-0.12.2/lib/compass/compiler.rb:126:in `timed'
28 | /Users/jlong/.rvm/gems/ruby-2.0.0-p0/gems/compass-0.12.2/lib/compass/compiler.rb:139:in `block in compile'
29 | /Users/jlong/.rvm/gems/ruby-2.0.0-p0/gems/compass-0.12.2/lib/compass/logger.rb:45:in `red'
30 | /Users/jlong/.rvm/gems/ruby-2.0.0-p0/gems/compass-0.12.2/lib/compass/compiler.rb:138:in `compile'
31 | /Users/jlong/.rvm/gems/ruby-2.0.0-p0/gems/compass-0.12.2/lib/compass/compiler.rb:118:in `compile_if_required'
32 | /Users/jlong/.rvm/gems/ruby-2.0.0-p0/gems/compass-0.12.2/lib/compass/compiler.rb:103:in `block (2 levels) in run'
33 | /Users/jlong/.rvm/gems/ruby-2.0.0-p0/gems/compass-0.12.2/lib/compass/compiler.rb:101:in `each'
34 | /Users/jlong/.rvm/gems/ruby-2.0.0-p0/gems/compass-0.12.2/lib/compass/compiler.rb:101:in `block in run'
35 | /Users/jlong/.rvm/gems/ruby-2.0.0-p0/gems/compass-0.12.2/lib/compass/compiler.rb:126:in `timed'
36 | /Users/jlong/.rvm/gems/ruby-2.0.0-p0/gems/compass-0.12.2/lib/compass/compiler.rb:100:in `run'
37 | /Users/jlong/.rvm/gems/ruby-2.0.0-p0/gems/compass-0.12.2/lib/compass/commands/watch_project.rb:147:in `recompile'
38 | /Users/jlong/.rvm/gems/ruby-2.0.0-p0/gems/fssm-0.2.10/lib/fssm/path.rb:73:in `call'
39 | /Users/jlong/.rvm/gems/ruby-2.0.0-p0/gems/fssm-0.2.10/lib/fssm/path.rb:73:in `run_callback'
40 | /Users/jlong/.rvm/gems/ruby-2.0.0-p0/gems/fssm-0.2.10/lib/fssm/path.rb:55:in `callback_action'
41 | /Users/jlong/.rvm/gems/ruby-2.0.0-p0/gems/fssm-0.2.10/lib/fssm/path.rb:35:in `update'
42 | /Users/jlong/.rvm/gems/ruby-2.0.0-p0/gems/fssm-0.2.10/lib/fssm/state/directory.rb:39:in `block in modified'
43 | /Users/jlong/.rvm/gems/ruby-2.0.0-p0/gems/fssm-0.2.10/lib/fssm/state/directory.rb:37:in `each'
44 | /Users/jlong/.rvm/gems/ruby-2.0.0-p0/gems/fssm-0.2.10/lib/fssm/state/directory.rb:37:in `modified'
45 | /Users/jlong/.rvm/gems/ruby-2.0.0-p0/gems/fssm-0.2.10/lib/fssm/state/directory.rb:18:in `refresh'
46 | /Users/jlong/.rvm/gems/ruby-2.0.0-p0/gems/fssm-0.2.10/lib/fssm/backends/polling.rb:17:in `block (2 levels) in run'
47 | /Users/jlong/.rvm/gems/ruby-2.0.0-p0/gems/fssm-0.2.10/lib/fssm/backends/polling.rb:17:in `each'
48 | /Users/jlong/.rvm/gems/ruby-2.0.0-p0/gems/fssm-0.2.10/lib/fssm/backends/polling.rb:17:in `block in run'
49 | /Users/jlong/.rvm/gems/ruby-2.0.0-p0/gems/fssm-0.2.10/lib/fssm/backends/polling.rb:15:in `loop'
50 | /Users/jlong/.rvm/gems/ruby-2.0.0-p0/gems/fssm-0.2.10/lib/fssm/backends/polling.rb:15:in `run'
51 | /Users/jlong/.rvm/gems/ruby-2.0.0-p0/gems/fssm-0.2.10/lib/fssm/monitor.rb:26:in `run'
52 | /Users/jlong/.rvm/gems/ruby-2.0.0-p0/gems/fssm-0.2.10/lib/fssm.rb:70:in `monitor'
53 | /Users/jlong/.rvm/gems/ruby-2.0.0-p0/gems/compass-0.12.2/lib/compass/commands/watch_project.rb:87:in `perform'
54 | /Users/jlong/.rvm/gems/ruby-2.0.0-p0/gems/compass-0.12.2/lib/compass/commands/base.rb:18:in `execute'
55 | /Users/jlong/.rvm/gems/ruby-2.0.0-p0/gems/compass-0.12.2/lib/compass/commands/project_base.rb:19:in `execute'
56 | /Users/jlong/.rvm/gems/ruby-2.0.0-p0/gems/compass-0.12.2/lib/compass/exec/sub_command_ui.rb:43:in `perform!'
57 | /Users/jlong/.rvm/gems/ruby-2.0.0-p0/gems/compass-0.12.2/lib/compass/exec/sub_command_ui.rb:15:in `run!'
58 | /Users/jlong/.rvm/gems/ruby-2.0.0-p0/gems/compass-0.12.2/bin/compass:30:in `block in <top (required)>'
59 | /Users/jlong/.rvm/gems/ruby-2.0.0-p0/gems/compass-0.12.2/bin/compass:44:in `call'
60 | /Users/jlong/.rvm/gems/ruby-2.0.0-p0/gems/compass-0.12.2/bin/compass:44:in `<top (required)>'
61 | /Users/jlong/.rvm/gems/ruby-2.0.0-p0/bin/compass:23:in `load'
62 | /Users/jlong/.rvm/gems/ruby-2.0.0-p0/bin/compass:23:in `<main>'
63 | /Users/jlong/.rvm/gems/ruby-2.0.0-p0/bin/ruby_noexec_wrapper:14:in `eval'
64 | /Users/jlong/.rvm/gems/ruby-2.0.0-p0/bin/ruby_noexec_wrapper:14:in `<main>'
65 | */
66 | body:before {
67 |   white-space: pre;
68 |   font-family: monospace;
69 |   content: "Syntax error: Undefined mixin 'keyframes'.\A         on line 11 of /Users/jlong/Workspaces/spinners/sass/spinner/plus-loader.scss, in `keyframes'\A         from line 11 of /Users/jlong/Workspaces/spinners/sass/spinner/plus-loader.scss"; }
70 | 


--------------------------------------------------------------------------------
/css/spinner/pong.css:
--------------------------------------------------------------------------------
  1 | @-moz-keyframes pong-loader {
  2 |   0% {
  3 |     left: 5px;
  4 |     top: 0;
  5 |   }
  6 |   25% {
  7 |     left: 65px;
  8 |     top: 20px;
  9 |   }
 10 |   50% {
 11 |     left: 5px;
 12 |   }
 13 |   62.5% {
 14 |     top: 50px;
 15 |   }
 16 |   75% {
 17 |     left: 65px;
 18 |     top: 70%;
 19 |   }
 20 |   100% {
 21 |     left: 5px;
 22 |     top: 0%;
 23 |   }
 24 | }
 25 | @-webkit-keyframes pong-loader {
 26 |   0% {
 27 |     left: 5px;
 28 |     top: 0;
 29 |   }
 30 |   25% {
 31 |     left: 65px;
 32 |     top: 20px;
 33 |   }
 34 |   50% {
 35 |     left: 5px;
 36 |   }
 37 |   62.5% {
 38 |     top: 50px;
 39 |   }
 40 |   75% {
 41 |     left: 65px;
 42 |     top: 70%;
 43 |   }
 44 |   100% {
 45 |     left: 5px;
 46 |     top: 0%;
 47 |   }
 48 | }
 49 | @keyframes pong-loader {
 50 |   0% {
 51 |     left: 5px;
 52 |     top: 0;
 53 |   }
 54 |   25% {
 55 |     left: 65px;
 56 |     top: 20px;
 57 |   }
 58 |   50% {
 59 |     left: 5px;
 60 |   }
 61 |   62.5% {
 62 |     top: 50px;
 63 |   }
 64 |   75% {
 65 |     left: 65px;
 66 |     top: 70%;
 67 |   }
 68 |   100% {
 69 |     left: 5px;
 70 |     top: 0%;
 71 |   }
 72 | }
 73 | @-moz-keyframes pong-loader-paddle-1 {
 74 |   0% {
 75 |     -moz-box-shadow: inset #353c39 0 5px 0 0, inset #353c39 0 -35px 0 0, inset #353c39 -3px 0 0 0, inset #8cdb8b -10px 0 0 0;
 76 |     box-shadow: inset #353c39 0 5px 0 0, inset #353c39 0 -35px 0 0, inset #353c39 -3px 0 0 0, inset #8cdb8b -10px 0 0 0;
 77 |   }
 78 |   25% {
 79 |     -moz-box-shadow: inset #353c39 0 15px 0 0, inset #353c39 0 -25px 0 0, inset #353c39 -3px 0 0 0, inset #8cdb8b -10px 0 0 0;
 80 |     box-shadow: inset #353c39 0 15px 0 0, inset #353c39 0 -25px 0 0, inset #353c39 -3px 0 0 0, inset #8cdb8b -10px 0 0 0;
 81 |   }
 82 |   50% {
 83 |     -moz-box-shadow: inset #353c39 0 0 0 0, inset #353c39 0 -40px 0 0, inset #353c39 -3px 0 0 0, inset #8cdb8b -10px 0 0 0;
 84 |     box-shadow: inset #353c39 0 0 0 0, inset #353c39 0 -40px 0 0, inset #353c39 -3px 0 0 0, inset #8cdb8b -10px 0 0 0;
 85 |   }
 86 |   62.5% {
 87 |     -moz-box-shadow: inset #353c39 0 10px 0 0, inset #353c39 0 -30px 0 0, inset #353c39 -3px 0 0 0, inset #8cdb8b -10px 0 0 0;
 88 |     box-shadow: inset #353c39 0 10px 0 0, inset #353c39 0 -30px 0 0, inset #353c39 -3px 0 0 0, inset #8cdb8b -10px 0 0 0;
 89 |   }
 90 |   75% {
 91 |     -moz-box-shadow: inset #353c39 0 40px 0 0, inset #353c39 0 0 0 0, inset #353c39 -3px 0 0 0, inset #8cdb8b -10px 0 0 0;
 92 |     box-shadow: inset #353c39 0 40px 0 0, inset #353c39 0 0 0 0, inset #353c39 -3px 0 0 0, inset #8cdb8b -10px 0 0 0;
 93 |   }
 94 |   100% {
 95 |     -moz-box-shadow: inset #353c39 0 5px 0 0, inset #353c39 0 -35px 0 0, inset #353c39 -3px 0 0 0, inset #8cdb8b -10px 0 0 0;
 96 |     box-shadow: inset #353c39 0 5px 0 0, inset #353c39 0 -35px 0 0, inset #353c39 -3px 0 0 0, inset #8cdb8b -10px 0 0 0;
 97 |   }
 98 | }
 99 | @-webkit-keyframes pong-loader-paddle-1 {
100 |   0% {
101 |     -webkit-box-shadow: inset #353c39 0 5px 0 0, inset #353c39 0 -35px 0 0, inset #353c39 -3px 0 0 0, inset #8cdb8b -10px 0 0 0;
102 |     box-shadow: inset #353c39 0 5px 0 0, inset #353c39 0 -35px 0 0, inset #353c39 -3px 0 0 0, inset #8cdb8b -10px 0 0 0;
103 |   }
104 |   25% {
105 |     -webkit-box-shadow: inset #353c39 0 15px 0 0, inset #353c39 0 -25px 0 0, inset #353c39 -3px 0 0 0, inset #8cdb8b -10px 0 0 0;
106 |     box-shadow: inset #353c39 0 15px 0 0, inset #353c39 0 -25px 0 0, inset #353c39 -3px 0 0 0, inset #8cdb8b -10px 0 0 0;
107 |   }
108 |   50% {
109 |     -webkit-box-shadow: inset #353c39 0 0 0 0, inset #353c39 0 -40px 0 0, inset #353c39 -3px 0 0 0, inset #8cdb8b -10px 0 0 0;
110 |     box-shadow: inset #353c39 0 0 0 0, inset #353c39 0 -40px 0 0, inset #353c39 -3px 0 0 0, inset #8cdb8b -10px 0 0 0;
111 |   }
112 |   62.5% {
113 |     -webkit-box-shadow: inset #353c39 0 10px 0 0, inset #353c39 0 -30px 0 0, inset #353c39 -3px 0 0 0, inset #8cdb8b -10px 0 0 0;
114 |     box-shadow: inset #353c39 0 10px 0 0, inset #353c39 0 -30px 0 0, inset #353c39 -3px 0 0 0, inset #8cdb8b -10px 0 0 0;
115 |   }
116 |   75% {
117 |     -webkit-box-shadow: inset #353c39 0 40px 0 0, inset #353c39 0 0 0 0, inset #353c39 -3px 0 0 0, inset #8cdb8b -10px 0 0 0;
118 |     box-shadow: inset #353c39 0 40px 0 0, inset #353c39 0 0 0 0, inset #353c39 -3px 0 0 0, inset #8cdb8b -10px 0 0 0;
119 |   }
120 |   100% {
121 |     -webkit-box-shadow: inset #353c39 0 5px 0 0, inset #353c39 0 -35px 0 0, inset #353c39 -3px 0 0 0, inset #8cdb8b -10px 0 0 0;
122 |     box-shadow: inset #353c39 0 5px 0 0, inset #353c39 0 -35px 0 0, inset #353c39 -3px 0 0 0, inset #8cdb8b -10px 0 0 0;
123 |   }
124 | }
125 | @keyframes pong-loader-paddle-1 {
126 |   0% {
127 |     -moz-box-shadow: inset #353c39 0 5px 0 0, inset #353c39 0 -35px 0 0, inset #353c39 -3px 0 0 0, inset #8cdb8b -10px 0 0 0;
128 |     -webkit-box-shadow: inset #353c39 0 5px 0 0, inset #353c39 0 -35px 0 0, inset #353c39 -3px 0 0 0, inset #8cdb8b -10px 0 0 0;
129 |     box-shadow: inset #353c39 0 5px 0 0, inset #353c39 0 -35px 0 0, inset #353c39 -3px 0 0 0, inset #8cdb8b -10px 0 0 0;
130 |   }
131 |   25% {
132 |     -moz-box-shadow: inset #353c39 0 15px 0 0, inset #353c39 0 -25px 0 0, inset #353c39 -3px 0 0 0, inset #8cdb8b -10px 0 0 0;
133 |     -webkit-box-shadow: inset #353c39 0 15px 0 0, inset #353c39 0 -25px 0 0, inset #353c39 -3px 0 0 0, inset #8cdb8b -10px 0 0 0;
134 |     box-shadow: inset #353c39 0 15px 0 0, inset #353c39 0 -25px 0 0, inset #353c39 -3px 0 0 0, inset #8cdb8b -10px 0 0 0;
135 |   }
136 |   50% {
137 |     -moz-box-shadow: inset #353c39 0 0 0 0, inset #353c39 0 -40px 0 0, inset #353c39 -3px 0 0 0, inset #8cdb8b -10px 0 0 0;
138 |     -webkit-box-shadow: inset #353c39 0 0 0 0, inset #353c39 0 -40px 0 0, inset #353c39 -3px 0 0 0, inset #8cdb8b -10px 0 0 0;
139 |     box-shadow: inset #353c39 0 0 0 0, inset #353c39 0 -40px 0 0, inset #353c39 -3px 0 0 0, inset #8cdb8b -10px 0 0 0;
140 |   }
141 |   62.5% {
142 |     -moz-box-shadow: inset #353c39 0 10px 0 0, inset #353c39 0 -30px 0 0, inset #353c39 -3px 0 0 0, inset #8cdb8b -10px 0 0 0;
143 |     -webkit-box-shadow: inset #353c39 0 10px 0 0, inset #353c39 0 -30px 0 0, inset #353c39 -3px 0 0 0, inset #8cdb8b -10px 0 0 0;
144 |     box-shadow: inset #353c39 0 10px 0 0, inset #353c39 0 -30px 0 0, inset #353c39 -3px 0 0 0, inset #8cdb8b -10px 0 0 0;
145 |   }
146 |   75% {
147 |     -moz-box-shadow: inset #353c39 0 40px 0 0, inset #353c39 0 0 0 0, inset #353c39 -3px 0 0 0, inset #8cdb8b -10px 0 0 0;
148 |     -webkit-box-shadow: inset #353c39 0 40px 0 0, inset #353c39 0 0 0 0, inset #353c39 -3px 0 0 0, inset #8cdb8b -10px 0 0 0;
149 |     box-shadow: inset #353c39 0 40px 0 0, inset #353c39 0 0 0 0, inset #353c39 -3px 0 0 0, inset #8cdb8b -10px 0 0 0;
150 |   }
151 |   100% {
152 |     -moz-box-shadow: inset #353c39 0 5px 0 0, inset #353c39 0 -35px 0 0, inset #353c39 -3px 0 0 0, inset #8cdb8b -10px 0 0 0;
153 |     -webkit-box-shadow: inset #353c39 0 5px 0 0, inset #353c39 0 -35px 0 0, inset #353c39 -3px 0 0 0, inset #8cdb8b -10px 0 0 0;
154 |     box-shadow: inset #353c39 0 5px 0 0, inset #353c39 0 -35px 0 0, inset #353c39 -3px 0 0 0, inset #8cdb8b -10px 0 0 0;
155 |   }
156 | }
157 | @-moz-keyframes pong-loader-paddle-2 {
158 |   0% {
159 |     -moz-box-shadow: inset #353c39 0 0 0 0, inset #353c39 0 -40px 0 0, inset #353c39 3px 0 0 0, inset #8cdb8b -10px 0 0 0;
160 |     box-shadow: inset #353c39 0 0 0 0, inset #353c39 0 -40px 0 0, inset #353c39 3px 0 0 0, inset #8cdb8b -10px 0 0 0;
161 |   }
162 |   50% {
163 |     -moz-box-shadow: inset #353c39 0 30px 0 0, inset #353c39 0 -10px 0 0, inset #353c39 3px 0 0 0, inset #8cdb8b -10px 0 0 0;
164 |     box-shadow: inset #353c39 0 30px 0 0, inset #353c39 0 -10px 0 0, inset #353c39 3px 0 0 0, inset #8cdb8b -10px 0 0 0;
165 |   }
166 |   62.5% {
167 |     -moz-box-shadow: inset #353c39 0 40px 0 0, inset #353c39 0 0 0 0, inset #353c39 3px 0 0 0, inset #8cdb8b -10px 0 0 0;
168 |     box-shadow: inset #353c39 0 40px 0 0, inset #353c39 0 0 0 0, inset #353c39 3px 0 0 0, inset #8cdb8b -10px 0 0 0;
169 |   }
170 |   75% {
171 |     -moz-box-shadow: inset #353c39 0 20px 0 0, inset #353c39 0 -20px 0 0, inset #353c39 3px 0 0 0, inset #8cdb8b -10px 0 0 0;
172 |     box-shadow: inset #353c39 0 20px 0 0, inset #353c39 0 -20px 0 0, inset #353c39 3px 0 0 0, inset #8cdb8b -10px 0 0 0;
173 |   }
174 |   100% {
175 |     -moz-box-shadow: inset #353c39 0 0 0 0, inset #353c39 0 -40px 0 0, inset #353c39 3px 0 0 0, inset #8cdb8b -10px 0 0 0;
176 |     box-shadow: inset #353c39 0 0 0 0, inset #353c39 0 -40px 0 0, inset #353c39 3px 0 0 0, inset #8cdb8b -10px 0 0 0;
177 |   }
178 | }
179 | @-webkit-keyframes pong-loader-paddle-2 {
180 |   0% {
181 |     -webkit-box-shadow: inset #353c39 0 0 0 0, inset #353c39 0 -40px 0 0, inset #353c39 3px 0 0 0, inset #8cdb8b -10px 0 0 0;
182 |     box-shadow: inset #353c39 0 0 0 0, inset #353c39 0 -40px 0 0, inset #353c39 3px 0 0 0, inset #8cdb8b -10px 0 0 0;
183 |   }
184 |   50% {
185 |     -webkit-box-shadow: inset #353c39 0 30px 0 0, inset #353c39 0 -10px 0 0, inset #353c39 3px 0 0 0, inset #8cdb8b -10px 0 0 0;
186 |     box-shadow: inset #353c39 0 30px 0 0, inset #353c39 0 -10px 0 0, inset #353c39 3px 0 0 0, inset #8cdb8b -10px 0 0 0;
187 |   }
188 |   62.5% {
189 |     -webkit-box-shadow: inset #353c39 0 40px 0 0, inset #353c39 0 0 0 0, inset #353c39 3px 0 0 0, inset #8cdb8b -10px 0 0 0;
190 |     box-shadow: inset #353c39 0 40px 0 0, inset #353c39 0 0 0 0, inset #353c39 3px 0 0 0, inset #8cdb8b -10px 0 0 0;
191 |   }
192 |   75% {
193 |     -webkit-box-shadow: inset #353c39 0 20px 0 0, inset #353c39 0 -20px 0 0, inset #353c39 3px 0 0 0, inset #8cdb8b -10px 0 0 0;
194 |     box-shadow: inset #353c39 0 20px 0 0, inset #353c39 0 -20px 0 0, inset #353c39 3px 0 0 0, inset #8cdb8b -10px 0 0 0;
195 |   }
196 |   100% {
197 |     -webkit-box-shadow: inset #353c39 0 0 0 0, inset #353c39 0 -40px 0 0, inset #353c39 3px 0 0 0, inset #8cdb8b -10px 0 0 0;
198 |     box-shadow: inset #353c39 0 0 0 0, inset #353c39 0 -40px 0 0, inset #353c39 3px 0 0 0, inset #8cdb8b -10px 0 0 0;
199 |   }
200 | }
201 | @keyframes pong-loader-paddle-2 {
202 |   0% {
203 |     -moz-box-shadow: inset #353c39 0 0 0 0, inset #353c39 0 -40px 0 0, inset #353c39 3px 0 0 0, inset #8cdb8b -10px 0 0 0;
204 |     -webkit-box-shadow: inset #353c39 0 0 0 0, inset #353c39 0 -40px 0 0, inset #353c39 3px 0 0 0, inset #8cdb8b -10px 0 0 0;
205 |     box-shadow: inset #353c39 0 0 0 0, inset #353c39 0 -40px 0 0, inset #353c39 3px 0 0 0, inset #8cdb8b -10px 0 0 0;
206 |   }
207 |   50% {
208 |     -moz-box-shadow: inset #353c39 0 30px 0 0, inset #353c39 0 -10px 0 0, inset #353c39 3px 0 0 0, inset #8cdb8b -10px 0 0 0;
209 |     -webkit-box-shadow: inset #353c39 0 30px 0 0, inset #353c39 0 -10px 0 0, inset #353c39 3px 0 0 0, inset #8cdb8b -10px 0 0 0;
210 |     box-shadow: inset #353c39 0 30px 0 0, inset #353c39 0 -10px 0 0, inset #353c39 3px 0 0 0, inset #8cdb8b -10px 0 0 0;
211 |   }
212 |   62.5% {
213 |     -moz-box-shadow: inset #353c39 0 40px 0 0, inset #353c39 0 0 0 0, inset #353c39 3px 0 0 0, inset #8cdb8b -10px 0 0 0;
214 |     -webkit-box-shadow: inset #353c39 0 40px 0 0, inset #353c39 0 0 0 0, inset #353c39 3px 0 0 0, inset #8cdb8b -10px 0 0 0;
215 |     box-shadow: inset #353c39 0 40px 0 0, inset #353c39 0 0 0 0, inset #353c39 3px 0 0 0, inset #8cdb8b -10px 0 0 0;
216 |   }
217 |   75% {
218 |     -moz-box-shadow: inset #353c39 0 20px 0 0, inset #353c39 0 -20px 0 0, inset #353c39 3px 0 0 0, inset #8cdb8b -10px 0 0 0;
219 |     -webkit-box-shadow: inset #353c39 0 20px 0 0, inset #353c39 0 -20px 0 0, inset #353c39 3px 0 0 0, inset #8cdb8b -10px 0 0 0;
220 |     box-shadow: inset #353c39 0 20px 0 0, inset #353c39 0 -20px 0 0, inset #353c39 3px 0 0 0, inset #8cdb8b -10px 0 0 0;
221 |   }
222 |   100% {
223 |     -moz-box-shadow: inset #353c39 0 0 0 0, inset #353c39 0 -40px 0 0, inset #353c39 3px 0 0 0, inset #8cdb8b -10px 0 0 0;
224 |     -webkit-box-shadow: inset #353c39 0 0 0 0, inset #353c39 0 -40px 0 0, inset #353c39 3px 0 0 0, inset #8cdb8b -10px 0 0 0;
225 |     box-shadow: inset #353c39 0 0 0 0, inset #353c39 0 -40px 0 0, inset #353c39 3px 0 0 0, inset #8cdb8b -10px 0 0 0;
226 |   }
227 | }
228 | /* :not(:required) hides this rule from IE9 and below */
229 | .pong-loader:not(:required) {
230 |   width: 80px;
231 |   height: 60px;
232 |   background: #353c39;
233 |   position: relative;
234 |   display: inline-block;
235 |   overflow: hidden;
236 |   text-indent: 100%;
237 |   -moz-box-shadow: inset #353c39 0 0 0 0, inset #353c39 0 -40px 0 0, inset #353c39 -3px 0 0 0, inset #8cdb8b -10px 0 0 0;
238 |   -webkit-box-shadow: inset #353c39 0 0 0 0, inset #353c39 0 -40px 0 0, inset #353c39 -3px 0 0 0, inset #8cdb8b -10px 0 0 0;
239 |   box-shadow: inset #353c39 0 0 0 0, inset #353c39 0 -40px 0 0, inset #353c39 -3px 0 0 0, inset #8cdb8b -10px 0 0 0;
240 |   -moz-animation: pong-loader-paddle-1 1500ms infinite linear;
241 |   -webkit-animation: pong-loader-paddle-1 1500ms infinite linear;
242 |   animation: pong-loader-paddle-1 1500ms infinite linear;
243 | }
244 | .pong-loader:not(:required):before {
245 |   -moz-animation: pong-loader-paddle-2 1500ms infinite linear;
246 |   -webkit-animation: pong-loader-paddle-2 1500ms infinite linear;
247 |   animation: pong-loader-paddle-2 1500ms infinite linear;
248 |   position: absolute;
249 |   top: 0;
250 |   left: 0;
251 |   display: block;
252 |   content: "";
253 |   width: 10px;
254 |   height: 100%;
255 |   -moz-box-shadow: inset #353c39 0 0 0 0, inset #353c39 0 -40px 0 0, inset #353c39 -3px 0 0 0, inset #8cdb8b -10px 0 0 0;
256 |   -webkit-box-shadow: inset #353c39 0 0 0 0, inset #353c39 0 -40px 0 0, inset #353c39 -3px 0 0 0, inset #8cdb8b -10px 0 0 0;
257 |   box-shadow: inset #353c39 0 0 0 0, inset #353c39 0 -40px 0 0, inset #353c39 -3px 0 0 0, inset #8cdb8b -10px 0 0 0;
258 | }
259 | .pong-loader:not(:required):after {
260 |   content: "";
261 |   display: block;
262 |   -moz-animation: pong-loader 1500ms infinite linear;
263 |   -webkit-animation: pong-loader 1500ms infinite linear;
264 |   animation: pong-loader 1500ms infinite linear;
265 |   -moz-border-radius: 50%;
266 |   -webkit-border-radius: 50%;
267 |   border-radius: 50%;
268 |   position: absolute;
269 |   left: 0;
270 |   top: 0;
271 |   width: 10px;
272 |   height: 10px;
273 |   background: #8cdb8b;
274 | }
275 | 


--------------------------------------------------------------------------------
/css/spinner/pulse.css:
--------------------------------------------------------------------------------
 1 | .pulse-loader:not(:required) {
 2 |   display: inline-block;
 3 |   width: 50px;
 4 |   height: 50px;
 5 |   -moz-animation: pulse-loader 0.7s linear infinite alternate;
 6 |   -webkit-animation: pulse-loader 0.7s linear infinite alternate;
 7 |   animation: pulse-loader 0.7s linear infinite alternate;
 8 |   border: 2px solid #e67e22;
 9 |   -moz-border-radius: 50%;
10 |   -webkit-border-radius: 50%;
11 |   border-radius: 50%;
12 |   overflow: hidden;
13 |   text-indent: 50px;
14 | }
15 | 
16 | @-moz-keyframes pulse-loader {
17 |   0% {
18 |     -moz-box-shadow: #e67e22 0 0 0px 20px;
19 |     box-shadow: #e67e22 0 0 0px 20px;
20 |   }
21 |   40% {
22 |     -moz-box-shadow: none;
23 |     box-shadow: none;
24 |   }
25 |   100% {
26 |     -moz-box-shadow: #e67e22 0 0 0px 25px inset;
27 |     box-shadow: #e67e22 0 0 0px 25px inset;
28 |   }
29 | }
30 | @-webkit-keyframes pulse-loader {
31 |   0% {
32 |     -webkit-box-shadow: #e67e22 0 0 0px 20px;
33 |     box-shadow: #e67e22 0 0 0px 20px;
34 |   }
35 |   40% {
36 |     -webkit-box-shadow: none;
37 |     box-shadow: none;
38 |   }
39 |   100% {
40 |     -webkit-box-shadow: #e67e22 0 0 0px 25px inset;
41 |     box-shadow: #e67e22 0 0 0px 25px inset;
42 |   }
43 | }
44 | @keyframes pulse-loader {
45 |   0% {
46 |     -moz-box-shadow: #e67e22 0 0 0px 20px;
47 |     -webkit-box-shadow: #e67e22 0 0 0px 20px;
48 |     box-shadow: #e67e22 0 0 0px 20px;
49 |   }
50 |   40% {
51 |     -moz-box-shadow: none;
52 |     -webkit-box-shadow: none;
53 |     box-shadow: none;
54 |   }
55 |   100% {
56 |     -moz-box-shadow: #e67e22 0 0 0px 25px inset;
57 |     -webkit-box-shadow: #e67e22 0 0 0px 25px inset;
58 |     box-shadow: #e67e22 0 0 0px 25px inset;
59 |   }
60 | }
61 | 


--------------------------------------------------------------------------------
/css/spinner/refreshing.css:
--------------------------------------------------------------------------------
 1 | @-moz-keyframes refreshing-loader {
 2 |   0% {
 3 |     -moz-transform: rotate(0deg);
 4 |     transform: rotate(0deg);
 5 |   }
 6 |   100% {
 7 |     -moz-transform: rotate(360deg);
 8 |     transform: rotate(360deg);
 9 |   }
10 | }
11 | @-webkit-keyframes refreshing-loader {
12 |   0% {
13 |     -webkit-transform: rotate(0deg);
14 |     transform: rotate(0deg);
15 |   }
16 |   100% {
17 |     -webkit-transform: rotate(360deg);
18 |     transform: rotate(360deg);
19 |   }
20 | }
21 | @keyframes refreshing-loader {
22 |   0% {
23 |     -moz-transform: rotate(0deg);
24 |     -ms-transform: rotate(0deg);
25 |     -webkit-transform: rotate(0deg);
26 |     transform: rotate(0deg);
27 |   }
28 |   100% {
29 |     -moz-transform: rotate(360deg);
30 |     -ms-transform: rotate(360deg);
31 |     -webkit-transform: rotate(360deg);
32 |     transform: rotate(360deg);
33 |   }
34 | }
35 | /* :not(:required) hides this rule from IE9 and below */
36 | .refreshing-loader:not(:required) {
37 |   -moz-animation: refreshing-loader 1000ms infinite linear;
38 |   -webkit-animation: refreshing-loader 1000ms infinite linear;
39 |   animation: refreshing-loader 1000ms infinite linear;
40 |   -moz-border-radius: 2.4em;
41 |   -webkit-border-radius: 2.4em;
42 |   border-radius: 2.4em;
43 |   border: 0.4em solid #9ac;
44 |   border-left-color: transparent;
45 |   color: transparent;
46 |   display: inline-block;
47 |   font-size: 10px;
48 |   line-height: 1.2;
49 |   width: 3em;
50 |   height: 3em;
51 |   text-indent: 100%;
52 | }
53 | .refreshing-loader:not(:required):after {
54 |   display: block;
55 |   border: 0.5em solid transparent;
56 |   border-top-color: #9ac;
57 |   border-left-color: #9ac;
58 |   content: '';
59 |   width: 0;
60 |   height: 0;
61 |   overflow: hidden;
62 |   margin-left: -0.2em;
63 |   margin-top: 1em;
64 | }
65 | 


--------------------------------------------------------------------------------
/css/spinner/spinner.css:
--------------------------------------------------------------------------------
 1 | @-moz-keyframes spinner-loader {
 2 |   0% {
 3 |     -moz-transform: rotate(0deg);
 4 |     transform: rotate(0deg);
 5 |   }
 6 |   100% {
 7 |     -moz-transform: rotate(360deg);
 8 |     transform: rotate(360deg);
 9 |   }
10 | }
11 | @-webkit-keyframes spinner-loader {
12 |   0% {
13 |     -webkit-transform: rotate(0deg);
14 |     transform: rotate(0deg);
15 |   }
16 |   100% {
17 |     -webkit-transform: rotate(360deg);
18 |     transform: rotate(360deg);
19 |   }
20 | }
21 | @keyframes spinner-loader {
22 |   0% {
23 |     -moz-transform: rotate(0deg);
24 |     -ms-transform: rotate(0deg);
25 |     -webkit-transform: rotate(0deg);
26 |     transform: rotate(0deg);
27 |   }
28 |   100% {
29 |     -moz-transform: rotate(360deg);
30 |     -ms-transform: rotate(360deg);
31 |     -webkit-transform: rotate(360deg);
32 |     transform: rotate(360deg);
33 |   }
34 | }
35 | /* :not(:required) hides this rule from IE9 and below */
36 | .spinner-loader:not(:required) {
37 |   -moz-animation: spinner-loader 1500ms infinite linear;
38 |   -webkit-animation: spinner-loader 1500ms infinite linear;
39 |   animation: spinner-loader 1500ms infinite linear;
40 |   -moz-border-radius: 0.5em;
41 |   -webkit-border-radius: 0.5em;
42 |   border-radius: 0.5em;
43 |   -moz-box-shadow: rgba(0, 0, 51, 0.3) 1.5em 0 0 0, rgba(0, 0, 51, 0.3) 1.1em 1.1em 0 0, rgba(0, 0, 51, 0.3) 0 1.5em 0 0, rgba(0, 0, 51, 0.3) -1.1em 1.1em 0 0, rgba(0, 0, 51, 0.3) -1.5em 0 0 0, rgba(0, 0, 51, 0.3) -1.1em -1.1em 0 0, rgba(0, 0, 51, 0.3) 0 -1.5em 0 0, rgba(0, 0, 51, 0.3) 1.1em -1.1em 0 0;
44 |   -webkit-box-shadow: rgba(0, 0, 51, 0.3) 1.5em 0 0 0, rgba(0, 0, 51, 0.3) 1.1em 1.1em 0 0, rgba(0, 0, 51, 0.3) 0 1.5em 0 0, rgba(0, 0, 51, 0.3) -1.1em 1.1em 0 0, rgba(0, 0, 51, 0.3) -1.5em 0 0 0, rgba(0, 0, 51, 0.3) -1.1em -1.1em 0 0, rgba(0, 0, 51, 0.3) 0 -1.5em 0 0, rgba(0, 0, 51, 0.3) 1.1em -1.1em 0 0;
45 |   box-shadow: rgba(0, 0, 51, 0.3) 1.5em 0 0 0, rgba(0, 0, 51, 0.3) 1.1em 1.1em 0 0, rgba(0, 0, 51, 0.3) 0 1.5em 0 0, rgba(0, 0, 51, 0.3) -1.1em 1.1em 0 0, rgba(0, 0, 51, 0.3) -1.5em 0 0 0, rgba(0, 0, 51, 0.3) -1.1em -1.1em 0 0, rgba(0, 0, 51, 0.3) 0 -1.5em 0 0, rgba(0, 0, 51, 0.3) 1.1em -1.1em 0 0;
46 |   display: inline-block;
47 |   font-size: 10px;
48 |   width: 1em;
49 |   height: 1em;
50 |   margin: 1.5em;
51 |   overflow: hidden;
52 |   text-indent: 100%;
53 | }
54 | 


--------------------------------------------------------------------------------
/css/spinner/spinning-pixels.css:
--------------------------------------------------------------------------------
 1 | /* :not(:required) hides this rule from IE9 and below */
 2 | .spinning-pixels-loader:not(:required) {
 3 |   -moz-animation: spinning-pixels 2s linear infinite;
 4 |   -webkit-animation: spinning-pixels 2s linear infinite;
 5 |   animation: spinning-pixels 2s linear infinite;
 6 |   width: 10px;
 7 |   height: 10px;
 8 |   font-size: 0;
 9 |   display: inline-block;
10 |   background: #f35626;
11 |   -moz-box-shadow: 15px 15px 0 0 #f35626, -15px -15px 0 0 #f35626, 15px -15px 0 0 #f35626, -15px 15px 0 0 #f35626, 0 15px 0 0 #f35626, 15px 0 0 0 #f35626, -15px 0 0 0 #f35626, 0 -15px 0 0 #f35626;
12 |   -webkit-box-shadow: 15px 15px 0 0 #f35626, -15px -15px 0 0 #f35626, 15px -15px 0 0 #f35626, -15px 15px 0 0 #f35626, 0 15px 0 0 #f35626, 15px 0 0 0 #f35626, -15px 0 0 0 #f35626, 0 -15px 0 0 #f35626;
13 |   box-shadow: 15px 15px 0 0 #f35626, -15px -15px 0 0 #f35626, 15px -15px 0 0 #f35626, -15px 15px 0 0 #f35626, 0 15px 0 0 #f35626, 15px 0 0 0 #f35626, -15px 0 0 0 #f35626, 0 -15px 0 0 #f35626;
14 | }
15 | 
16 | @-moz-keyframes spinning-pixels {
17 |   0% {
18 |     -webkit-filter: hue-rotate(0deg);
19 |     filter: hue-rotate(0deg);
20 |   }
21 |   50% {
22 |     -moz-box-shadow: 20px 20px 0 0 #f35626, -20px -20px 0 0 #f35626, 20px -20px 0 0 #f35626, -20px 20px 0 0 #f35626, 0 10px 0 0 #f35626, 10px 0 0 0 #f35626, -10px 0 0 0 #f35626, 0 -10px 0 0 #f35626;
23 |     box-shadow: 20px 20px 0 0 #f35626, -20px -20px 0 0 #f35626, 20px -20px 0 0 #f35626, -20px 20px 0 0 #f35626, 0 10px 0 0 #f35626, 10px 0 0 0 #f35626, -10px 0 0 0 #f35626, 0 -10px 0 0 #f35626;
24 |   }
25 |   75% {
26 |     -moz-box-shadow: 20px 20px 0 0 #f35626, -20px -20px 0 0 #f35626, 20px -20px 0 0 #f35626, -20px 20px 0 0 #f35626, 0 10px 0 0 #f35626, 10px 0 0 0 #f35626, -10px 0 0 0 #f35626, 0 -10px 0 0 #f35626;
27 |     box-shadow: 20px 20px 0 0 #f35626, -20px -20px 0 0 #f35626, 20px -20px 0 0 #f35626, -20px 20px 0 0 #f35626, 0 10px 0 0 #f35626, 10px 0 0 0 #f35626, -10px 0 0 0 #f35626, 0 -10px 0 0 #f35626;
28 |   }
29 |   100% {
30 |     -moz-transform: rotate(360deg);
31 |     transform: rotate(360deg);
32 |     -webkit-filter: hue-rotate(360deg);
33 |     filter: hue-rotate(360deg);
34 |   }
35 | }
36 | @-webkit-keyframes spinning-pixels {
37 |   0% {
38 |     -webkit-filter: hue-rotate(0deg);
39 |     filter: hue-rotate(0deg);
40 |   }
41 |   50% {
42 |     -webkit-box-shadow: 20px 20px 0 0 #f35626, -20px -20px 0 0 #f35626, 20px -20px 0 0 #f35626, -20px 20px 0 0 #f35626, 0 10px 0 0 #f35626, 10px 0 0 0 #f35626, -10px 0 0 0 #f35626, 0 -10px 0 0 #f35626;
43 |     box-shadow: 20px 20px 0 0 #f35626, -20px -20px 0 0 #f35626, 20px -20px 0 0 #f35626, -20px 20px 0 0 #f35626, 0 10px 0 0 #f35626, 10px 0 0 0 #f35626, -10px 0 0 0 #f35626, 0 -10px 0 0 #f35626;
44 |   }
45 |   75% {
46 |     -webkit-box-shadow: 20px 20px 0 0 #f35626, -20px -20px 0 0 #f35626, 20px -20px 0 0 #f35626, -20px 20px 0 0 #f35626, 0 10px 0 0 #f35626, 10px 0 0 0 #f35626, -10px 0 0 0 #f35626, 0 -10px 0 0 #f35626;
47 |     box-shadow: 20px 20px 0 0 #f35626, -20px -20px 0 0 #f35626, 20px -20px 0 0 #f35626, -20px 20px 0 0 #f35626, 0 10px 0 0 #f35626, 10px 0 0 0 #f35626, -10px 0 0 0 #f35626, 0 -10px 0 0 #f35626;
48 |   }
49 |   100% {
50 |     -webkit-transform: rotate(360deg);
51 |     transform: rotate(360deg);
52 |     -webkit-filter: hue-rotate(360deg);
53 |     filter: hue-rotate(360deg);
54 |   }
55 | }
56 | @keyframes spinning-pixels {
57 |   0% {
58 |     -webkit-filter: hue-rotate(0deg);
59 |     filter: hue-rotate(0deg);
60 |   }
61 |   50% {
62 |     -moz-box-shadow: 20px 20px 0 0 #f35626, -20px -20px 0 0 #f35626, 20px -20px 0 0 #f35626, -20px 20px 0 0 #f35626, 0 10px 0 0 #f35626, 10px 0 0 0 #f35626, -10px 0 0 0 #f35626, 0 -10px 0 0 #f35626;
63 |     -webkit-box-shadow: 20px 20px 0 0 #f35626, -20px -20px 0 0 #f35626, 20px -20px 0 0 #f35626, -20px 20px 0 0 #f35626, 0 10px 0 0 #f35626, 10px 0 0 0 #f35626, -10px 0 0 0 #f35626, 0 -10px 0 0 #f35626;
64 |     box-shadow: 20px 20px 0 0 #f35626, -20px -20px 0 0 #f35626, 20px -20px 0 0 #f35626, -20px 20px 0 0 #f35626, 0 10px 0 0 #f35626, 10px 0 0 0 #f35626, -10px 0 0 0 #f35626, 0 -10px 0 0 #f35626;
65 |   }
66 |   75% {
67 |     -moz-box-shadow: 20px 20px 0 0 #f35626, -20px -20px 0 0 #f35626, 20px -20px 0 0 #f35626, -20px 20px 0 0 #f35626, 0 10px 0 0 #f35626, 10px 0 0 0 #f35626, -10px 0 0 0 #f35626, 0 -10px 0 0 #f35626;
68 |     -webkit-box-shadow: 20px 20px 0 0 #f35626, -20px -20px 0 0 #f35626, 20px -20px 0 0 #f35626, -20px 20px 0 0 #f35626, 0 10px 0 0 #f35626, 10px 0 0 0 #f35626, -10px 0 0 0 #f35626, 0 -10px 0 0 #f35626;
69 |     box-shadow: 20px 20px 0 0 #f35626, -20px -20px 0 0 #f35626, 20px -20px 0 0 #f35626, -20px 20px 0 0 #f35626, 0 10px 0 0 #f35626, 10px 0 0 0 #f35626, -10px 0 0 0 #f35626, 0 -10px 0 0 #f35626;
70 |   }
71 |   100% {
72 |     -moz-transform: rotate(360deg);
73 |     -ms-transform: rotate(360deg);
74 |     -webkit-transform: rotate(360deg);
75 |     transform: rotate(360deg);
76 |     -webkit-filter: hue-rotate(360deg);
77 |     filter: hue-rotate(360deg);
78 |   }
79 | }
80 | 


--------------------------------------------------------------------------------
/css/spinner/three-quarters.css:
--------------------------------------------------------------------------------
 1 | @-moz-keyframes three-quarters-loader {
 2 |   0% {
 3 |     -moz-transform: rotate(0deg);
 4 |     transform: rotate(0deg);
 5 |   }
 6 |   100% {
 7 |     -moz-transform: rotate(360deg);
 8 |     transform: rotate(360deg);
 9 |   }
10 | }
11 | @-webkit-keyframes three-quarters-loader {
12 |   0% {
13 |     -webkit-transform: rotate(0deg);
14 |     transform: rotate(0deg);
15 |   }
16 |   100% {
17 |     -webkit-transform: rotate(360deg);
18 |     transform: rotate(360deg);
19 |   }
20 | }
21 | @keyframes three-quarters-loader {
22 |   0% {
23 |     -moz-transform: rotate(0deg);
24 |     -ms-transform: rotate(0deg);
25 |     -webkit-transform: rotate(0deg);
26 |     transform: rotate(0deg);
27 |   }
28 |   100% {
29 |     -moz-transform: rotate(360deg);
30 |     -ms-transform: rotate(360deg);
31 |     -webkit-transform: rotate(360deg);
32 |     transform: rotate(360deg);
33 |   }
34 | }
35 | /* :not(:required) hides this rule from IE9 and below */
36 | .three-quarters-loader:not(:required) {
37 |   -moz-animation: three-quarters-loader 1250ms infinite linear;
38 |   -webkit-animation: three-quarters-loader 1250ms infinite linear;
39 |   animation: three-quarters-loader 1250ms infinite linear;
40 |   border: 8px solid #38e;
41 |   border-right-color: transparent;
42 |   border-radius: 16px;
43 |   box-sizing: border-box;
44 |   display: inline-block;
45 |   position: relative;
46 |   overflow: hidden;
47 |   text-indent: -9999px;
48 |   width: 32px;
49 |   height: 32px;
50 | }
51 | 


--------------------------------------------------------------------------------
/css/spinner/throbber.css:
--------------------------------------------------------------------------------
 1 | @-moz-keyframes throbber-loader {
 2 |   0% {
 3 |     background: #dde2e7;
 4 |   }
 5 |   10% {
 6 |     background: #6b9dc8;
 7 |   }
 8 |   40% {
 9 |     background: #dde2e7;
10 |   }
11 | }
12 | @-webkit-keyframes throbber-loader {
13 |   0% {
14 |     background: #dde2e7;
15 |   }
16 |   10% {
17 |     background: #6b9dc8;
18 |   }
19 |   40% {
20 |     background: #dde2e7;
21 |   }
22 | }
23 | @keyframes throbber-loader {
24 |   0% {
25 |     background: #dde2e7;
26 |   }
27 |   10% {
28 |     background: #6b9dc8;
29 |   }
30 |   40% {
31 |     background: #dde2e7;
32 |   }
33 | }
34 | /* :not(:required) hides these rules from IE9 and below */
35 | .throbber-loader:not(:required) {
36 |   -moz-animation: throbber-loader 2000ms 300ms infinite ease-out;
37 |   -webkit-animation: throbber-loader 2000ms 300ms infinite ease-out;
38 |   animation: throbber-loader 2000ms 300ms infinite ease-out;
39 |   background: #dde2e7;
40 |   display: inline-block;
41 |   position: relative;
42 |   text-indent: -9999px;
43 |   width: 0.9em;
44 |   height: 1.5em;
45 |   margin: 0 1.6em;
46 | }
47 | .throbber-loader:not(:required):before, .throbber-loader:not(:required):after {
48 |   background: #dde2e7;
49 |   content: '\x200B';
50 |   display: inline-block;
51 |   width: 0.9em;
52 |   height: 1.5em;
53 |   position: absolute;
54 |   top: 0;
55 | }
56 | .throbber-loader:not(:required):before {
57 |   -moz-animation: throbber-loader 2000ms 150ms infinite ease-out;
58 |   -webkit-animation: throbber-loader 2000ms 150ms infinite ease-out;
59 |   animation: throbber-loader 2000ms 150ms infinite ease-out;
60 |   left: -1.6em;
61 | }
62 | .throbber-loader:not(:required):after {
63 |   -moz-animation: throbber-loader 2000ms 450ms infinite ease-out;
64 |   -webkit-animation: throbber-loader 2000ms 450ms infinite ease-out;
65 |   animation: throbber-loader 2000ms 450ms infinite ease-out;
66 |   right: -1.6em;
67 | }
68 | 


--------------------------------------------------------------------------------
/css/spinner/timer.css:
--------------------------------------------------------------------------------
 1 | @-moz-keyframes timer-loader {
 2 |   0% {
 3 |     -moz-transform: rotate(0deg);
 4 |     transform: rotate(0deg);
 5 |   }
 6 |   100% {
 7 |     -moz-transform: rotate(360deg);
 8 |     transform: rotate(360deg);
 9 |   }
10 | }
11 | @-webkit-keyframes timer-loader {
12 |   0% {
13 |     -webkit-transform: rotate(0deg);
14 |     transform: rotate(0deg);
15 |   }
16 |   100% {
17 |     -webkit-transform: rotate(360deg);
18 |     transform: rotate(360deg);
19 |   }
20 | }
21 | @keyframes timer-loader {
22 |   0% {
23 |     -moz-transform: rotate(0deg);
24 |     -ms-transform: rotate(0deg);
25 |     -webkit-transform: rotate(0deg);
26 |     transform: rotate(0deg);
27 |   }
28 |   100% {
29 |     -moz-transform: rotate(360deg);
30 |     -ms-transform: rotate(360deg);
31 |     -webkit-transform: rotate(360deg);
32 |     transform: rotate(360deg);
33 |   }
34 | }
35 | /* :not(:required) hides this rule from IE9 and below */
36 | .timer-loader:not(:required) {
37 |   border: 6px solid #c8d;
38 |   -moz-border-radius: 24px;
39 |   -webkit-border-radius: 24px;
40 |   border-radius: 24px;
41 |   -moz-box-sizing: border-box;
42 |   -webkit-box-sizing: border-box;
43 |   box-sizing: border-box;
44 |   display: inline-block;
45 |   overflow: hidden;
46 |   position: relative;
47 |   text-indent: -9999px;
48 |   width: 48px;
49 |   height: 48px;
50 | }
51 | .timer-loader:not(:required)::before {
52 |   -moz-animation: timer-loader 1250ms infinite linear;
53 |   -webkit-animation: timer-loader 1250ms infinite linear;
54 |   animation: timer-loader 1250ms infinite linear;
55 |   -moz-transform-origin: 3px 3px;
56 |   -ms-transform-origin: 3px 3px;
57 |   -webkit-transform-origin: 3px 3px;
58 |   transform-origin: 3px 3px;
59 |   background: #c8d;
60 |   -moz-border-radius: 3px;
61 |   -webkit-border-radius: 3px;
62 |   border-radius: 3px;
63 |   content: '';
64 |   display: block;
65 |   position: absolute;
66 |   width: 6px;
67 |   height: 19.2px;
68 |   left: 15px;
69 |   top: 15px;
70 | }
71 | .timer-loader:not(:required)::after {
72 |   -moz-animation: timer-loader 15000ms infinite linear;
73 |   -webkit-animation: timer-loader 15000ms infinite linear;
74 |   animation: timer-loader 15000ms infinite linear;
75 |   -moz-transform-origin: 3px 3px;
76 |   -ms-transform-origin: 3px 3px;
77 |   -webkit-transform-origin: 3px 3px;
78 |   transform-origin: 3px 3px;
79 |   background: #c8d;
80 |   -moz-border-radius: 3px;
81 |   -webkit-border-radius: 3px;
82 |   border-radius: 3px;
83 |   content: '';
84 |   display: block;
85 |   position: absolute;
86 |   width: 6px;
87 |   height: 16px;
88 |   left: 15px;
89 |   top: 15px;
90 | }
91 | 


--------------------------------------------------------------------------------
/css/spinner/whirly.css:
--------------------------------------------------------------------------------
 1 | @-moz-keyframes whirly-loader {
 2 |   0% {
 3 |     -moz-transform: rotate(0deg);
 4 |     transform: rotate(0deg);
 5 |   }
 6 |   100% {
 7 |     -moz-transform: rotate(360deg);
 8 |     transform: rotate(360deg);
 9 |   }
10 | }
11 | @-webkit-keyframes whirly-loader {
12 |   0% {
13 |     -webkit-transform: rotate(0deg);
14 |     transform: rotate(0deg);
15 |   }
16 |   100% {
17 |     -webkit-transform: rotate(360deg);
18 |     transform: rotate(360deg);
19 |   }
20 | }
21 | @keyframes whirly-loader {
22 |   0% {
23 |     -moz-transform: rotate(0deg);
24 |     -ms-transform: rotate(0deg);
25 |     -webkit-transform: rotate(0deg);
26 |     transform: rotate(0deg);
27 |   }
28 |   100% {
29 |     -moz-transform: rotate(360deg);
30 |     -ms-transform: rotate(360deg);
31 |     -webkit-transform: rotate(360deg);
32 |     transform: rotate(360deg);
33 |   }
34 | }
35 | /* :not(:required) hides this rule from IE9 and below */
36 | .whirly-loader:not(:required) {
37 |   overflow: hidden;
38 |   position: relative;
39 |   text-indent: -9999px;
40 |   display: inline-block;
41 |   width: 8px;
42 |   height: 8px;
43 |   background: transparent;
44 |   -moz-border-radius: 100%;
45 |   -webkit-border-radius: 100%;
46 |   border-radius: 100%;
47 |   -moz-box-shadow: #e66 0px 26px 0 6px, #e66 0.90971px 26.05079px 0 5.93333px, #e66 1.82297px 26.06967px 0 5.86667px, #e66 2.73865px 26.05647px 0 5.8px, #e66 3.65561px 26.01104px 0 5.73333px, #e66 4.57274px 25.93327px 0 5.66667px, #e66 5.48887px 25.8231px 0 5.6px, #e66 6.40287px 25.68049px 0 5.53333px, #e66 7.31358px 25.50548px 0 5.46667px, #e66 8.21985px 25.2981px 0 5.4px, #e66 9.12054px 25.05847px 0 5.33333px, #e66 10.01448px 24.78672px 0 5.26667px, #e66 10.90054px 24.48302px 0 5.2px, #e66 11.77757px 24.1476px 0 5.13333px, #e66 12.64443px 23.78072px 0 5.06667px, #e66 13.5px 23.38269px 0 5px, #e66 14.34315px 22.95384px 0 4.93333px, #e66 15.17277px 22.49455px 0 4.86667px, #e66 15.98776px 22.00526px 0 4.8px, #e66 16.78704px 21.48643px 0 4.73333px, #e66 17.56953px 20.93855px 0 4.66667px, #e66 18.33418px 20.36217px 0 4.6px, #e66 19.07995px 19.75787px 0 4.53333px, #e66 19.80582px 19.12626px 0 4.46667px, #e66 20.5108px 18.468px 0 4.4px, #e66 21.1939px 17.78379px 0 4.33333px, #e66 21.85416px 17.07434px 0 4.26667px, #e66 22.49067px 16.34043px 0 4.2px, #e66 23.10251px 15.58284px 0 4.13333px, #e66 23.68881px 14.80241px 0 4.06667px, #e66 24.24871px 14px 0 4px, #e66 24.7814px 13.1765px 0 3.93333px, #e66 25.28607px 12.33284px 0 3.86667px, #e66 25.76198px 11.46997px 0 3.8px, #e66 26.2084px 10.58888px 0 3.73333px, #e66 26.62462px 9.69057px 0 3.66667px, #e66 27.01001px 8.77608px 0 3.6px, #e66 27.36392px 7.84648px 0 3.53333px, #e66 27.68577px 6.90284px 0 3.46667px, #e66 27.97502px 5.94627px 0 3.4px, #e66 28.23116px 4.97791px 0 3.33333px, #e66 28.4537px 3.99891px 0 3.26667px, #e66 28.64223px 3.01042px 0 3.2px, #e66 28.79635px 2.01364px 0 3.13333px, #e66 28.91571px 1.00976px 0 3.06667px, #e66 29px 0px 0 3px, #e66 29.04896px -1.01441px 0 2.93333px, #e66 29.06237px -2.03224px 0 2.86667px, #e66 29.04004px -3.05223px 0 2.8px, #e66 28.98185px -4.07313px 0 2.73333px, #e66 28.88769px -5.09368px 0 2.66667px, #e66 28.75754px -6.1126px 0 2.6px, #e66 28.59138px -7.12863px 0 2.53333px, #e66 28.38926px -8.14049px 0 2.46667px, #e66 28.15127px -9.1469px 0 2.4px, #e66 27.87755px -10.1466px 0 2.33333px, #e66 27.56827px -11.1383px 0 2.26667px, #e66 27.22365px -12.12075px 0 2.2px, #e66 26.84398px -13.09268px 0 2.13333px, #e66 26.42956px -14.05285px 0 2.06667px, #e66 25.98076px -15px 0 2px, #e66 25.49798px -15.93291px 0 1.93333px, #e66 24.98167px -16.85035px 0 1.86667px, #e66 24.43231px -17.75111px 0 1.8px, #e66 23.85046px -18.63402px 0 1.73333px, #e66 23.23668px -19.49789px 0 1.66667px, #e66 22.5916px -20.34157px 0 1.6px, #e66 21.91589px -21.16393px 0 1.53333px, #e66 21.21024px -21.96384px 0 1.46667px, #e66 20.4754px -22.74023px 0 1.4px, #e66 19.71215px -23.49203px 0 1.33333px, #e66 18.92133px -24.2182px 0 1.26667px, #e66 18.10379px -24.91772px 0 1.2px, #e66 17.26042px -25.58963px 0 1.13333px, #e66 16.39217px -26.23295px 0 1.06667px, #e66 15.5px -26.84679px 0 1px, #e66 14.58492px -27.43024px 0 0.93333px, #e66 13.64796px -27.98245px 0 0.86667px, #e66 12.69018px -28.50262px 0 0.8px, #e66 11.7127px -28.98995px 0 0.73333px, #e66 10.71663px -29.4437px 0 0.66667px, #e66 9.70313px -29.86317px 0 0.6px, #e66 8.67339px -30.2477px 0 0.53333px, #e66 7.6286px -30.59666px 0 0.46667px, #e66 6.57001px -30.90946px 0 0.4px, #e66 5.49886px -31.18558px 0 0.33333px, #e66 4.41643px -31.42451px 0 0.26667px, #e66 3.32401px -31.6258px 0 0.2px, #e66 2.22291px -31.78904px 0 0.13333px, #e66 1.11446px -31.91388px 0 0.06667px, #e66 0px -32px 0 0px, #e66 -1.11911px -32.04713px 0 -0.06667px, #e66 -2.24151px -32.05506px 0 -0.13333px, #e66 -3.36582px -32.02361px 0 -0.2px, #e66 -4.49065px -31.95265px 0 -0.26667px, #e66 -5.61462px -31.84212px 0 -0.33333px, #e66 -6.73634px -31.69198px 0 -0.4px, #e66 -7.8544px -31.50227px 0 -0.46667px, #e66 -8.9674px -31.27305px 0 -0.53333px, #e66 -10.07395px -31.00444px 0 -0.6px, #e66 -11.17266px -30.69663px 0 -0.66667px, #e66 -12.26212px -30.34982px 0 -0.73333px, #e66 -13.34096px -29.96429px 0 -0.8px, #e66 -14.4078px -29.54036px 0 -0.86667px, #e66 -15.46126px -29.07841px 0 -0.93333px, #e66 -16.5px -28.57884px 0 -1px, #e66 -17.52266px -28.04212px 0 -1.06667px, #e66 -18.52792px -27.46878px 0 -1.13333px, #e66 -19.51447px -26.85936px 0 -1.2px, #e66 -20.48101px -26.21449px 0 -1.26667px, #e66 -21.42625px -25.53481px 0 -1.33333px, #e66 -22.34896px -24.82104px 0 -1.4px, #e66 -23.2479px -24.07391px 0 -1.46667px, #e66 -24.12186px -23.29421px 0 -1.53333px, #e66 -24.96967px -22.48279px 0 -1.6px, #e66 -25.79016px -21.64052px 0 -1.66667px, #e66 -26.58223px -20.76831px 0 -1.73333px, #e66 -27.34477px -19.86714px 0 -1.8px, #e66 -28.07674px -18.938px 0 -1.86667px, #e66 -28.7771px -17.98193px 0 -1.93333px, #e66 -29.44486px -17px 0 -2px, #e66 -30.07908px -15.99333px 0 -2.06667px, #e66 -30.67884px -14.96307px 0 -2.13333px, #e66 -31.24325px -13.91039px 0 -2.2px, #e66 -31.7715px -12.83652px 0 -2.26667px, #e66 -32.26278px -11.74269px 0 -2.33333px, #e66 -32.71634px -10.63018px 0 -2.4px, #e66 -33.13149px -9.5003px 0 -2.46667px, #e66 -33.50755px -8.35437px 0 -2.53333px, #e66 -33.84391px -7.19374px 0 -2.6px, #e66 -34.14px -6.0198px 0 -2.66667px, #e66 -34.39531px -4.83395px 0 -2.73333px, #e66 -34.60936px -3.63759px 0 -2.8px, #e66 -34.78173px -2.43218px 0 -2.86667px, #e66 -34.91205px -1.21916px 0 -2.93333px, #e66 -35px 0px 0 -3px, #e66 -35.04531px 1.22381px 0 -3.06667px, #e66 -35.04775px 2.45078px 0 -3.13333px, #e66 -35.00717px 3.6794px 0 -3.2px, #e66 -34.92345px 4.90817px 0 -3.26667px, #e66 -34.79654px 6.13557px 0 -3.33333px, #e66 -34.62643px 7.36007px 0 -3.4px, #e66 -34.41316px 8.58016px 0 -3.46667px, #e66 -34.15683px 9.79431px 0 -3.53333px, #e66 -33.85761px 11.001px 0 -3.6px, #e66 -33.5157px 12.19872px 0 -3.66667px, #e66 -33.13137px 13.38594px 0 -3.73333px, #e66 -32.70493px 14.56117px 0 -3.8px, #e66 -32.23675px 15.72291px 0 -3.86667px, #e66 -31.72725px 16.86968px 0 -3.93333px, #e66 -31.17691px 18px 0 -4px, #e66 -30.58627px 19.11242px 0 -4.06667px, #e66 -29.95589px 20.2055px 0 -4.13333px, #e66 -29.28642px 21.27783px 0 -4.2px, #e66 -28.57852px 22.32799px 0 -4.26667px, #e66 -27.83295px 23.35462px 0 -4.33333px, #e66 -27.05047px 24.35635px 0 -4.4px, #e66 -26.23192px 25.33188px 0 -4.46667px, #e66 -25.37819px 26.27988px 0 -4.53333px, #e66 -24.49018px 27.1991px 0 -4.6px, #e66 -23.56888px 28.0883px 0 -4.66667px, #e66 -22.6153px 28.94626px 0 -4.73333px, #e66 -21.6305px 29.77183px 0 -4.8px, #e66 -20.61558px 30.56385px 0 -4.86667px, #e66 -19.57168px 31.32124px 0 -4.93333px, #e66 -18.5px 32.04294px 0 -5px, #e66 -17.40175px 32.72792px 0 -5.06667px, #e66 -16.27818px 33.37522px 0 -5.13333px, #e66 -15.1306px 33.98389px 0 -5.2px, #e66 -13.96034px 34.55305px 0 -5.26667px, #e66 -12.76875px 35.08186px 0 -5.33333px, #e66 -11.55724px 35.56951px 0 -5.4px, #e66 -10.32721px 36.01527px 0 -5.46667px, #e66 -9.08014px 36.41843px 0 -5.53333px, #e66 -7.81748px 36.77835px 0 -5.6px, #e66 -6.54075px 37.09443px 0 -5.66667px, #e66 -5.25147px 37.36612px 0 -5.73333px, #e66 -3.95118px 37.59293px 0 -5.8px, #e66 -2.64145px 37.77443px 0 -5.86667px, #e66 -1.32385px 37.91023px 0 -5.93333px;
48 |   -webkit-box-shadow: #e66 0px 26px 0 6px, #e66 0.90971px 26.05079px 0 5.93333px, #e66 1.82297px 26.06967px 0 5.86667px, #e66 2.73865px 26.05647px 0 5.8px, #e66 3.65561px 26.01104px 0 5.73333px, #e66 4.57274px 25.93327px 0 5.66667px, #e66 5.48887px 25.8231px 0 5.6px, #e66 6.40287px 25.68049px 0 5.53333px, #e66 7.31358px 25.50548px 0 5.46667px, #e66 8.21985px 25.2981px 0 5.4px, #e66 9.12054px 25.05847px 0 5.33333px, #e66 10.01448px 24.78672px 0 5.26667px, #e66 10.90054px 24.48302px 0 5.2px, #e66 11.77757px 24.1476px 0 5.13333px, #e66 12.64443px 23.78072px 0 5.06667px, #e66 13.5px 23.38269px 0 5px, #e66 14.34315px 22.95384px 0 4.93333px, #e66 15.17277px 22.49455px 0 4.86667px, #e66 15.98776px 22.00526px 0 4.8px, #e66 16.78704px 21.48643px 0 4.73333px, #e66 17.56953px 20.93855px 0 4.66667px, #e66 18.33418px 20.36217px 0 4.6px, #e66 19.07995px 19.75787px 0 4.53333px, #e66 19.80582px 19.12626px 0 4.46667px, #e66 20.5108px 18.468px 0 4.4px, #e66 21.1939px 17.78379px 0 4.33333px, #e66 21.85416px 17.07434px 0 4.26667px, #e66 22.49067px 16.34043px 0 4.2px, #e66 23.10251px 15.58284px 0 4.13333px, #e66 23.68881px 14.80241px 0 4.06667px, #e66 24.24871px 14px 0 4px, #e66 24.7814px 13.1765px 0 3.93333px, #e66 25.28607px 12.33284px 0 3.86667px, #e66 25.76198px 11.46997px 0 3.8px, #e66 26.2084px 10.58888px 0 3.73333px, #e66 26.62462px 9.69057px 0 3.66667px, #e66 27.01001px 8.77608px 0 3.6px, #e66 27.36392px 7.84648px 0 3.53333px, #e66 27.68577px 6.90284px 0 3.46667px, #e66 27.97502px 5.94627px 0 3.4px, #e66 28.23116px 4.97791px 0 3.33333px, #e66 28.4537px 3.99891px 0 3.26667px, #e66 28.64223px 3.01042px 0 3.2px, #e66 28.79635px 2.01364px 0 3.13333px, #e66 28.91571px 1.00976px 0 3.06667px, #e66 29px 0px 0 3px, #e66 29.04896px -1.01441px 0 2.93333px, #e66 29.06237px -2.03224px 0 2.86667px, #e66 29.04004px -3.05223px 0 2.8px, #e66 28.98185px -4.07313px 0 2.73333px, #e66 28.88769px -5.09368px 0 2.66667px, #e66 28.75754px -6.1126px 0 2.6px, #e66 28.59138px -7.12863px 0 2.53333px, #e66 28.38926px -8.14049px 0 2.46667px, #e66 28.15127px -9.1469px 0 2.4px, #e66 27.87755px -10.1466px 0 2.33333px, #e66 27.56827px -11.1383px 0 2.26667px, #e66 27.22365px -12.12075px 0 2.2px, #e66 26.84398px -13.09268px 0 2.13333px, #e66 26.42956px -14.05285px 0 2.06667px, #e66 25.98076px -15px 0 2px, #e66 25.49798px -15.93291px 0 1.93333px, #e66 24.98167px -16.85035px 0 1.86667px, #e66 24.43231px -17.75111px 0 1.8px, #e66 23.85046px -18.63402px 0 1.73333px, #e66 23.23668px -19.49789px 0 1.66667px, #e66 22.5916px -20.34157px 0 1.6px, #e66 21.91589px -21.16393px 0 1.53333px, #e66 21.21024px -21.96384px 0 1.46667px, #e66 20.4754px -22.74023px 0 1.4px, #e66 19.71215px -23.49203px 0 1.33333px, #e66 18.92133px -24.2182px 0 1.26667px, #e66 18.10379px -24.91772px 0 1.2px, #e66 17.26042px -25.58963px 0 1.13333px, #e66 16.39217px -26.23295px 0 1.06667px, #e66 15.5px -26.84679px 0 1px, #e66 14.58492px -27.43024px 0 0.93333px, #e66 13.64796px -27.98245px 0 0.86667px, #e66 12.69018px -28.50262px 0 0.8px, #e66 11.7127px -28.98995px 0 0.73333px, #e66 10.71663px -29.4437px 0 0.66667px, #e66 9.70313px -29.86317px 0 0.6px, #e66 8.67339px -30.2477px 0 0.53333px, #e66 7.6286px -30.59666px 0 0.46667px, #e66 6.57001px -30.90946px 0 0.4px, #e66 5.49886px -31.18558px 0 0.33333px, #e66 4.41643px -31.42451px 0 0.26667px, #e66 3.32401px -31.6258px 0 0.2px, #e66 2.22291px -31.78904px 0 0.13333px, #e66 1.11446px -31.91388px 0 0.06667px, #e66 0px -32px 0 0px, #e66 -1.11911px -32.04713px 0 -0.06667px, #e66 -2.24151px -32.05506px 0 -0.13333px, #e66 -3.36582px -32.02361px 0 -0.2px, #e66 -4.49065px -31.95265px 0 -0.26667px, #e66 -5.61462px -31.84212px 0 -0.33333px, #e66 -6.73634px -31.69198px 0 -0.4px, #e66 -7.8544px -31.50227px 0 -0.46667px, #e66 -8.9674px -31.27305px 0 -0.53333px, #e66 -10.07395px -31.00444px 0 -0.6px, #e66 -11.17266px -30.69663px 0 -0.66667px, #e66 -12.26212px -30.34982px 0 -0.73333px, #e66 -13.34096px -29.96429px 0 -0.8px, #e66 -14.4078px -29.54036px 0 -0.86667px, #e66 -15.46126px -29.07841px 0 -0.93333px, #e66 -16.5px -28.57884px 0 -1px, #e66 -17.52266px -28.04212px 0 -1.06667px, #e66 -18.52792px -27.46878px 0 -1.13333px, #e66 -19.51447px -26.85936px 0 -1.2px, #e66 -20.48101px -26.21449px 0 -1.26667px, #e66 -21.42625px -25.53481px 0 -1.33333px, #e66 -22.34896px -24.82104px 0 -1.4px, #e66 -23.2479px -24.07391px 0 -1.46667px, #e66 -24.12186px -23.29421px 0 -1.53333px, #e66 -24.96967px -22.48279px 0 -1.6px, #e66 -25.79016px -21.64052px 0 -1.66667px, #e66 -26.58223px -20.76831px 0 -1.73333px, #e66 -27.34477px -19.86714px 0 -1.8px, #e66 -28.07674px -18.938px 0 -1.86667px, #e66 -28.7771px -17.98193px 0 -1.93333px, #e66 -29.44486px -17px 0 -2px, #e66 -30.07908px -15.99333px 0 -2.06667px, #e66 -30.67884px -14.96307px 0 -2.13333px, #e66 -31.24325px -13.91039px 0 -2.2px, #e66 -31.7715px -12.83652px 0 -2.26667px, #e66 -32.26278px -11.74269px 0 -2.33333px, #e66 -32.71634px -10.63018px 0 -2.4px, #e66 -33.13149px -9.5003px 0 -2.46667px, #e66 -33.50755px -8.35437px 0 -2.53333px, #e66 -33.84391px -7.19374px 0 -2.6px, #e66 -34.14px -6.0198px 0 -2.66667px, #e66 -34.39531px -4.83395px 0 -2.73333px, #e66 -34.60936px -3.63759px 0 -2.8px, #e66 -34.78173px -2.43218px 0 -2.86667px, #e66 -34.91205px -1.21916px 0 -2.93333px, #e66 -35px 0px 0 -3px, #e66 -35.04531px 1.22381px 0 -3.06667px, #e66 -35.04775px 2.45078px 0 -3.13333px, #e66 -35.00717px 3.6794px 0 -3.2px, #e66 -34.92345px 4.90817px 0 -3.26667px, #e66 -34.79654px 6.13557px 0 -3.33333px, #e66 -34.62643px 7.36007px 0 -3.4px, #e66 -34.41316px 8.58016px 0 -3.46667px, #e66 -34.15683px 9.79431px 0 -3.53333px, #e66 -33.85761px 11.001px 0 -3.6px, #e66 -33.5157px 12.19872px 0 -3.66667px, #e66 -33.13137px 13.38594px 0 -3.73333px, #e66 -32.70493px 14.56117px 0 -3.8px, #e66 -32.23675px 15.72291px 0 -3.86667px, #e66 -31.72725px 16.86968px 0 -3.93333px, #e66 -31.17691px 18px 0 -4px, #e66 -30.58627px 19.11242px 0 -4.06667px, #e66 -29.95589px 20.2055px 0 -4.13333px, #e66 -29.28642px 21.27783px 0 -4.2px, #e66 -28.57852px 22.32799px 0 -4.26667px, #e66 -27.83295px 23.35462px 0 -4.33333px, #e66 -27.05047px 24.35635px 0 -4.4px, #e66 -26.23192px 25.33188px 0 -4.46667px, #e66 -25.37819px 26.27988px 0 -4.53333px, #e66 -24.49018px 27.1991px 0 -4.6px, #e66 -23.56888px 28.0883px 0 -4.66667px, #e66 -22.6153px 28.94626px 0 -4.73333px, #e66 -21.6305px 29.77183px 0 -4.8px, #e66 -20.61558px 30.56385px 0 -4.86667px, #e66 -19.57168px 31.32124px 0 -4.93333px, #e66 -18.5px 32.04294px 0 -5px, #e66 -17.40175px 32.72792px 0 -5.06667px, #e66 -16.27818px 33.37522px 0 -5.13333px, #e66 -15.1306px 33.98389px 0 -5.2px, #e66 -13.96034px 34.55305px 0 -5.26667px, #e66 -12.76875px 35.08186px 0 -5.33333px, #e66 -11.55724px 35.56951px 0 -5.4px, #e66 -10.32721px 36.01527px 0 -5.46667px, #e66 -9.08014px 36.41843px 0 -5.53333px, #e66 -7.81748px 36.77835px 0 -5.6px, #e66 -6.54075px 37.09443px 0 -5.66667px, #e66 -5.25147px 37.36612px 0 -5.73333px, #e66 -3.95118px 37.59293px 0 -5.8px, #e66 -2.64145px 37.77443px 0 -5.86667px, #e66 -1.32385px 37.91023px 0 -5.93333px;
49 |   box-shadow: #e66 0px 26px 0 6px, #e66 0.90971px 26.05079px 0 5.93333px, #e66 1.82297px 26.06967px 0 5.86667px, #e66 2.73865px 26.05647px 0 5.8px, #e66 3.65561px 26.01104px 0 5.73333px, #e66 4.57274px 25.93327px 0 5.66667px, #e66 5.48887px 25.8231px 0 5.6px, #e66 6.40287px 25.68049px 0 5.53333px, #e66 7.31358px 25.50548px 0 5.46667px, #e66 8.21985px 25.2981px 0 5.4px, #e66 9.12054px 25.05847px 0 5.33333px, #e66 10.01448px 24.78672px 0 5.26667px, #e66 10.90054px 24.48302px 0 5.2px, #e66 11.77757px 24.1476px 0 5.13333px, #e66 12.64443px 23.78072px 0 5.06667px, #e66 13.5px 23.38269px 0 5px, #e66 14.34315px 22.95384px 0 4.93333px, #e66 15.17277px 22.49455px 0 4.86667px, #e66 15.98776px 22.00526px 0 4.8px, #e66 16.78704px 21.48643px 0 4.73333px, #e66 17.56953px 20.93855px 0 4.66667px, #e66 18.33418px 20.36217px 0 4.6px, #e66 19.07995px 19.75787px 0 4.53333px, #e66 19.80582px 19.12626px 0 4.46667px, #e66 20.5108px 18.468px 0 4.4px, #e66 21.1939px 17.78379px 0 4.33333px, #e66 21.85416px 17.07434px 0 4.26667px, #e66 22.49067px 16.34043px 0 4.2px, #e66 23.10251px 15.58284px 0 4.13333px, #e66 23.68881px 14.80241px 0 4.06667px, #e66 24.24871px 14px 0 4px, #e66 24.7814px 13.1765px 0 3.93333px, #e66 25.28607px 12.33284px 0 3.86667px, #e66 25.76198px 11.46997px 0 3.8px, #e66 26.2084px 10.58888px 0 3.73333px, #e66 26.62462px 9.69057px 0 3.66667px, #e66 27.01001px 8.77608px 0 3.6px, #e66 27.36392px 7.84648px 0 3.53333px, #e66 27.68577px 6.90284px 0 3.46667px, #e66 27.97502px 5.94627px 0 3.4px, #e66 28.23116px 4.97791px 0 3.33333px, #e66 28.4537px 3.99891px 0 3.26667px, #e66 28.64223px 3.01042px 0 3.2px, #e66 28.79635px 2.01364px 0 3.13333px, #e66 28.91571px 1.00976px 0 3.06667px, #e66 29px 0px 0 3px, #e66 29.04896px -1.01441px 0 2.93333px, #e66 29.06237px -2.03224px 0 2.86667px, #e66 29.04004px -3.05223px 0 2.8px, #e66 28.98185px -4.07313px 0 2.73333px, #e66 28.88769px -5.09368px 0 2.66667px, #e66 28.75754px -6.1126px 0 2.6px, #e66 28.59138px -7.12863px 0 2.53333px, #e66 28.38926px -8.14049px 0 2.46667px, #e66 28.15127px -9.1469px 0 2.4px, #e66 27.87755px -10.1466px 0 2.33333px, #e66 27.56827px -11.1383px 0 2.26667px, #e66 27.22365px -12.12075px 0 2.2px, #e66 26.84398px -13.09268px 0 2.13333px, #e66 26.42956px -14.05285px 0 2.06667px, #e66 25.98076px -15px 0 2px, #e66 25.49798px -15.93291px 0 1.93333px, #e66 24.98167px -16.85035px 0 1.86667px, #e66 24.43231px -17.75111px 0 1.8px, #e66 23.85046px -18.63402px 0 1.73333px, #e66 23.23668px -19.49789px 0 1.66667px, #e66 22.5916px -20.34157px 0 1.6px, #e66 21.91589px -21.16393px 0 1.53333px, #e66 21.21024px -21.96384px 0 1.46667px, #e66 20.4754px -22.74023px 0 1.4px, #e66 19.71215px -23.49203px 0 1.33333px, #e66 18.92133px -24.2182px 0 1.26667px, #e66 18.10379px -24.91772px 0 1.2px, #e66 17.26042px -25.58963px 0 1.13333px, #e66 16.39217px -26.23295px 0 1.06667px, #e66 15.5px -26.84679px 0 1px, #e66 14.58492px -27.43024px 0 0.93333px, #e66 13.64796px -27.98245px 0 0.86667px, #e66 12.69018px -28.50262px 0 0.8px, #e66 11.7127px -28.98995px 0 0.73333px, #e66 10.71663px -29.4437px 0 0.66667px, #e66 9.70313px -29.86317px 0 0.6px, #e66 8.67339px -30.2477px 0 0.53333px, #e66 7.6286px -30.59666px 0 0.46667px, #e66 6.57001px -30.90946px 0 0.4px, #e66 5.49886px -31.18558px 0 0.33333px, #e66 4.41643px -31.42451px 0 0.26667px, #e66 3.32401px -31.6258px 0 0.2px, #e66 2.22291px -31.78904px 0 0.13333px, #e66 1.11446px -31.91388px 0 0.06667px, #e66 0px -32px 0 0px, #e66 -1.11911px -32.04713px 0 -0.06667px, #e66 -2.24151px -32.05506px 0 -0.13333px, #e66 -3.36582px -32.02361px 0 -0.2px, #e66 -4.49065px -31.95265px 0 -0.26667px, #e66 -5.61462px -31.84212px 0 -0.33333px, #e66 -6.73634px -31.69198px 0 -0.4px, #e66 -7.8544px -31.50227px 0 -0.46667px, #e66 -8.9674px -31.27305px 0 -0.53333px, #e66 -10.07395px -31.00444px 0 -0.6px, #e66 -11.17266px -30.69663px 0 -0.66667px, #e66 -12.26212px -30.34982px 0 -0.73333px, #e66 -13.34096px -29.96429px 0 -0.8px, #e66 -14.4078px -29.54036px 0 -0.86667px, #e66 -15.46126px -29.07841px 0 -0.93333px, #e66 -16.5px -28.57884px 0 -1px, #e66 -17.52266px -28.04212px 0 -1.06667px, #e66 -18.52792px -27.46878px 0 -1.13333px, #e66 -19.51447px -26.85936px 0 -1.2px, #e66 -20.48101px -26.21449px 0 -1.26667px, #e66 -21.42625px -25.53481px 0 -1.33333px, #e66 -22.34896px -24.82104px 0 -1.4px, #e66 -23.2479px -24.07391px 0 -1.46667px, #e66 -24.12186px -23.29421px 0 -1.53333px, #e66 -24.96967px -22.48279px 0 -1.6px, #e66 -25.79016px -21.64052px 0 -1.66667px, #e66 -26.58223px -20.76831px 0 -1.73333px, #e66 -27.34477px -19.86714px 0 -1.8px, #e66 -28.07674px -18.938px 0 -1.86667px, #e66 -28.7771px -17.98193px 0 -1.93333px, #e66 -29.44486px -17px 0 -2px, #e66 -30.07908px -15.99333px 0 -2.06667px, #e66 -30.67884px -14.96307px 0 -2.13333px, #e66 -31.24325px -13.91039px 0 -2.2px, #e66 -31.7715px -12.83652px 0 -2.26667px, #e66 -32.26278px -11.74269px 0 -2.33333px, #e66 -32.71634px -10.63018px 0 -2.4px, #e66 -33.13149px -9.5003px 0 -2.46667px, #e66 -33.50755px -8.35437px 0 -2.53333px, #e66 -33.84391px -7.19374px 0 -2.6px, #e66 -34.14px -6.0198px 0 -2.66667px, #e66 -34.39531px -4.83395px 0 -2.73333px, #e66 -34.60936px -3.63759px 0 -2.8px, #e66 -34.78173px -2.43218px 0 -2.86667px, #e66 -34.91205px -1.21916px 0 -2.93333px, #e66 -35px 0px 0 -3px, #e66 -35.04531px 1.22381px 0 -3.06667px, #e66 -35.04775px 2.45078px 0 -3.13333px, #e66 -35.00717px 3.6794px 0 -3.2px, #e66 -34.92345px 4.90817px 0 -3.26667px, #e66 -34.79654px 6.13557px 0 -3.33333px, #e66 -34.62643px 7.36007px 0 -3.4px, #e66 -34.41316px 8.58016px 0 -3.46667px, #e66 -34.15683px 9.79431px 0 -3.53333px, #e66 -33.85761px 11.001px 0 -3.6px, #e66 -33.5157px 12.19872px 0 -3.66667px, #e66 -33.13137px 13.38594px 0 -3.73333px, #e66 -32.70493px 14.56117px 0 -3.8px, #e66 -32.23675px 15.72291px 0 -3.86667px, #e66 -31.72725px 16.86968px 0 -3.93333px, #e66 -31.17691px 18px 0 -4px, #e66 -30.58627px 19.11242px 0 -4.06667px, #e66 -29.95589px 20.2055px 0 -4.13333px, #e66 -29.28642px 21.27783px 0 -4.2px, #e66 -28.57852px 22.32799px 0 -4.26667px, #e66 -27.83295px 23.35462px 0 -4.33333px, #e66 -27.05047px 24.35635px 0 -4.4px, #e66 -26.23192px 25.33188px 0 -4.46667px, #e66 -25.37819px 26.27988px 0 -4.53333px, #e66 -24.49018px 27.1991px 0 -4.6px, #e66 -23.56888px 28.0883px 0 -4.66667px, #e66 -22.6153px 28.94626px 0 -4.73333px, #e66 -21.6305px 29.77183px 0 -4.8px, #e66 -20.61558px 30.56385px 0 -4.86667px, #e66 -19.57168px 31.32124px 0 -4.93333px, #e66 -18.5px 32.04294px 0 -5px, #e66 -17.40175px 32.72792px 0 -5.06667px, #e66 -16.27818px 33.37522px 0 -5.13333px, #e66 -15.1306px 33.98389px 0 -5.2px, #e66 -13.96034px 34.55305px 0 -5.26667px, #e66 -12.76875px 35.08186px 0 -5.33333px, #e66 -11.55724px 35.56951px 0 -5.4px, #e66 -10.32721px 36.01527px 0 -5.46667px, #e66 -9.08014px 36.41843px 0 -5.53333px, #e66 -7.81748px 36.77835px 0 -5.6px, #e66 -6.54075px 37.09443px 0 -5.66667px, #e66 -5.25147px 37.36612px 0 -5.73333px, #e66 -3.95118px 37.59293px 0 -5.8px, #e66 -2.64145px 37.77443px 0 -5.86667px, #e66 -1.32385px 37.91023px 0 -5.93333px;
50 |   -moz-animation: whirly-loader 1.25s infinite linear;
51 |   -webkit-animation: whirly-loader 1.25s infinite linear;
52 |   animation: whirly-loader 1.25s infinite linear;
53 |   -moz-transform-origin: 50% 50%;
54 |   -ms-transform-origin: 50% 50%;
55 |   -webkit-transform-origin: 50% 50%;
56 |   transform-origin: 50% 50%;
57 | }
58 | 


--------------------------------------------------------------------------------
/css/spinner/wobblebar.css:
--------------------------------------------------------------------------------
  1 | @-moz-keyframes wobblebar-loader {
  2 |   0% {
  3 |     left: 4px;
  4 |   }
  5 |   3% {
  6 |     left: 104px;
  7 |   }
  8 |   6% {
  9 |     left: 4px;
 10 |   }
 11 |   9% {
 12 |     left: 104px;
 13 |   }
 14 |   12% {
 15 |     left: 4px;
 16 |   }
 17 |   15% {
 18 |     left: 104px;
 19 |   }
 20 |   18% {
 21 |     left: 32px;
 22 |   }
 23 |   27% {
 24 |     left: 32px;
 25 |   }
 26 |   30% {
 27 |     left: 104px;
 28 |   }
 29 |   33% {
 30 |     left: 4px;
 31 |   }
 32 |   36% {
 33 |     left: 104px;
 34 |   }
 35 |   39% {
 36 |     left: 4px;
 37 |   }
 38 |   42% {
 39 |     left: 104px;
 40 |   }
 41 |   45% {
 42 |     left: 4px;
 43 |   }
 44 |   48% {
 45 |     left: 104px;
 46 |   }
 47 |   51% {
 48 |     left: 52px;
 49 |   }
 50 |   63% {
 51 |     left: 52px;
 52 |   }
 53 |   66% {
 54 |     left: 4px;
 55 |   }
 56 |   69% {
 57 |     left: 104px;
 58 |   }
 59 |   72% {
 60 |     left: 4px;
 61 |   }
 62 |   75% {
 63 |     left: 104px;
 64 |   }
 65 |   78% {
 66 |     left: 4px;
 67 |   }
 68 |   81% {
 69 |     left: 104px;
 70 |   }
 71 |   84% {
 72 |     left: 72px;
 73 |   }
 74 |   94% {
 75 |     left: 72px;
 76 |   }
 77 |   97% {
 78 |     left: 104px;
 79 |   }
 80 | }
 81 | @-webkit-keyframes wobblebar-loader {
 82 |   0% {
 83 |     left: 4px;
 84 |   }
 85 |   3% {
 86 |     left: 104px;
 87 |   }
 88 |   6% {
 89 |     left: 4px;
 90 |   }
 91 |   9% {
 92 |     left: 104px;
 93 |   }
 94 |   12% {
 95 |     left: 4px;
 96 |   }
 97 |   15% {
 98 |     left: 104px;
 99 |   }
100 |   18% {
101 |     left: 32px;
102 |   }
103 |   27% {
104 |     left: 32px;
105 |   }
106 |   30% {
107 |     left: 104px;
108 |   }
109 |   33% {
110 |     left: 4px;
111 |   }
112 |   36% {
113 |     left: 104px;
114 |   }
115 |   39% {
116 |     left: 4px;
117 |   }
118 |   42% {
119 |     left: 104px;
120 |   }
121 |   45% {
122 |     left: 4px;
123 |   }
124 |   48% {
125 |     left: 104px;
126 |   }
127 |   51% {
128 |     left: 52px;
129 |   }
130 |   63% {
131 |     left: 52px;
132 |   }
133 |   66% {
134 |     left: 4px;
135 |   }
136 |   69% {
137 |     left: 104px;
138 |   }
139 |   72% {
140 |     left: 4px;
141 |   }
142 |   75% {
143 |     left: 104px;
144 |   }
145 |   78% {
146 |     left: 4px;
147 |   }
148 |   81% {
149 |     left: 104px;
150 |   }
151 |   84% {
152 |     left: 72px;
153 |   }
154 |   94% {
155 |     left: 72px;
156 |   }
157 |   97% {
158 |     left: 104px;
159 |   }
160 | }
161 | @keyframes wobblebar-loader {
162 |   0% {
163 |     left: 4px;
164 |   }
165 |   3% {
166 |     left: 104px;
167 |   }
168 |   6% {
169 |     left: 4px;
170 |   }
171 |   9% {
172 |     left: 104px;
173 |   }
174 |   12% {
175 |     left: 4px;
176 |   }
177 |   15% {
178 |     left: 104px;
179 |   }
180 |   18% {
181 |     left: 32px;
182 |   }
183 |   27% {
184 |     left: 32px;
185 |   }
186 |   30% {
187 |     left: 104px;
188 |   }
189 |   33% {
190 |     left: 4px;
191 |   }
192 |   36% {
193 |     left: 104px;
194 |   }
195 |   39% {
196 |     left: 4px;
197 |   }
198 |   42% {
199 |     left: 104px;
200 |   }
201 |   45% {
202 |     left: 4px;
203 |   }
204 |   48% {
205 |     left: 104px;
206 |   }
207 |   51% {
208 |     left: 52px;
209 |   }
210 |   63% {
211 |     left: 52px;
212 |   }
213 |   66% {
214 |     left: 4px;
215 |   }
216 |   69% {
217 |     left: 104px;
218 |   }
219 |   72% {
220 |     left: 4px;
221 |   }
222 |   75% {
223 |     left: 104px;
224 |   }
225 |   78% {
226 |     left: 4px;
227 |   }
228 |   81% {
229 |     left: 104px;
230 |   }
231 |   84% {
232 |     left: 72px;
233 |   }
234 |   94% {
235 |     left: 72px;
236 |   }
237 |   97% {
238 |     left: 104px;
239 |   }
240 | }
241 | /* :not(:required) hides this rule from IE9 and below */
242 | .wobblebar-loader:not(:required) {
243 |   background: #a9d;
244 |   -moz-border-radius: 10.66667px;
245 |   -webkit-border-radius: 10.66667px;
246 |   border-radius: 10.66667px;
247 |   display: inline-block;
248 |   overflow: hidden;
249 |   text-indent: -9999px;
250 |   width: 128px;
251 |   height: 21.33333px;
252 |   position: relative;
253 | }
254 | .wobblebar-loader:not(:required)::after {
255 |   -moz-animation: wobblebar-loader 15000ms infinite ease;
256 |   -webkit-animation: wobblebar-loader 15000ms infinite ease;
257 |   animation: wobblebar-loader 15000ms infinite ease;
258 |   background: white;
259 |   display: block;
260 |   -moz-border-radius: 7.11111px;
261 |   -webkit-border-radius: 7.11111px;
262 |   border-radius: 7.11111px;
263 |   content: '';
264 |   position: absolute;
265 |   top: 3.55556px;
266 |   left: 4px;
267 |   width: 21.33333px;
268 |   height: 14.22222px;
269 | }
270 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 | <head>
  4 |   <title>Spinner Examples</title>
  5 | 
  6 |   <style>
  7 |   body {
  8 |     background: #f3f6f9;
  9 |     font-family: sans-serif;
 10 |     font-weight: 100;
 11 |     font-size: 14px;
 12 |     margin: 0;
 13 |     padding: 20px;
 14 |   }
 15 | 
 16 |   .grid {
 17 |     overflow: hidden;
 18 |   }
 19 | 
 20 |   .cell {
 21 |     float: left;
 22 |     width: 25%;
 23 |     box-sizing: border-box;
 24 |     padding: 20px;
 25 |     display: table;
 26 |   }
 27 | 
 28 |   .card {
 29 |     background: white;
 30 |     border: 1px solid #c3c6cf;
 31 |     border-radius: 15px;
 32 |     display: table-cell;
 33 |     text-align: center;
 34 |     vertical-align: middle;
 35 |     height: 200px;
 36 |   }
 37 |   </style>
 38 | 
 39 |   <link rel="stylesheet" href="css/spinners.css" type="text/css">
 40 | </head>
 41 | <body>
 42 | 
 43 |   <div class="grid">
 44 | 
 45 |     <div class="cell">
 46 |       <div class="card">
 47 |         <span class="spinner-loader">Loading&#8230;</span>
 48 |       </div>
 49 |     </div>
 50 | 
 51 |     <div class="cell">
 52 |       <div class="card">
 53 |         <span class="throbber-loader">Loading&#8230;</span>
 54 |       </div>
 55 |     </div>
 56 | 
 57 |     <div class="cell">
 58 |       <div class="card">
 59 |         <span class="refreshing-loader">Loading&#8230;</span>
 60 |       </div>
 61 |     </div>
 62 | 
 63 |     <div class="cell">
 64 |       <div class="card">
 65 |         <span class="heartbeat-loader">Loading&#8230;</span>
 66 |       </div>
 67 |     </div>
 68 | 
 69 |     <div class="cell">
 70 |       <div class="card">
 71 |         <span class="gauge-loader">Loading&#8230;</span>
 72 |       </div>
 73 |     </div>
 74 | 
 75 |     <div class="cell">
 76 |       <div class="card">
 77 |         <span class="timer-loader">Loading&#8230;</span>
 78 |       </div>
 79 |     </div>
 80 | 
 81 |     <div class="cell">
 82 |       <div class="card">
 83 |         <span class="three-quarters-loader">Loading&#8230;</span>
 84 |       </div>
 85 |     </div>
 86 | 
 87 |     <div class="cell">
 88 |       <div class="card">
 89 |         <span class="wobblebar-loader">Loading&#8230;</span>
 90 |       </div>
 91 |     </div>
 92 | 
 93 |     <div class="cell">
 94 |       <div class="card">
 95 |         <span class="atebits-loader">Loading&#8230;</span>
 96 |       </div>
 97 |     </div>
 98 | 
 99 |     <div class="cell">
100 |       <div class="card">
101 |         <span class="whirly-loader">Loading&#8230;</span>
102 |       </div>
103 |     </div>
104 | 
105 |     <div class="cell">
106 |       <div class="card">
107 |         <span class="flower-loader">Loading&#8230;</span>
108 |       </div>
109 |     </div>
110 | 
111 |     <div class="cell">
112 |       <div class="card">
113 |         <span class="dots-loader">Loading&#8230;</span>
114 |       </div>
115 |     </div>
116 | 
117 |     <div class="cell">
118 |       <div class="card">
119 |         <span class="circles-loader">Loading&#8230;</span>
120 |       </div>
121 |     </div>
122 | 
123 |     <div class="cell">
124 |       <div class="card">
125 |         <span class="plus-loader">Loading&#8230;</span>
126 |       </div>
127 |     </div>
128 | 
129 |     <div class="cell">
130 |       <div class="card">
131 |         <span class="ball-loader">Loading&#8230;</span>
132 |       </div>
133 |     </div>
134 | 
135 |     <div class="cell">
136 |       <div class="card">
137 |         <span class="hexdots-loader">Loading&#8230;</span>
138 |       </div>
139 |     </div>
140 | 
141 |     <div class="cell">
142 |       <div class="card">
143 |         <span class="inner-circles-loader">Loading&#8230;</span>
144 |       </div>
145 |     </div>
146 | 
147 |     <div class="cell">
148 |       <div class="card">
149 |         <span class="pong-loader">Loading&#8230;</span>
150 |       </div>
151 |     </div>
152 | 
153 |     <div class="cell">
154 |       <div class="card">
155 |         <span class="pulse-loader">Loading&#8230;</span>
156 |       </div>
157 |     </div>
158 | 
159 |     <div class="cell">
160 |       <div class="card">
161 |         <span class="spinning-pixels-loader">Loading&#8230;</span>
162 |       </div>
163 |     </div>
164 | 
165 |     <div class="cell">
166 |       <div class="card">
167 |         <span class="echo-loader">Loading&#8230;</span>
168 |       </div>
169 |     </div>
170 |   </div>
171 | 
172 | </body>
173 | </html>
174 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "css-spinners",
 3 |   "version": "2.2.0",
 4 |   "description": "Simple CSS spinners and throbbers made with CSS and minimal HTML markup.",
 5 |   "repository": {
 6 |     "type": "git",
 7 |     "url": "https://github.com/jlong/css-spinners.git"
 8 |   },
 9 |   "bugs": {
10 |     "url": "https://github.com/jlong/css-spinners/issues"
11 |   },
12 |   "keywords": [
13 |     "spinners",
14 |     "throbbers",
15 |     "loaders",
16 |     "css",
17 |     "sass"
18 |   ],
19 |   "author": "John W. Long",
20 |   "license": "MIT",
21 |   "homepage": "http://css-spinners.com",
22 |   "style": "css/spinners.css",
23 |   "sass": "sass/spinners.sass",
24 |   "files": [
25 |     "css/**/*.css",
26 |     "sass/**/*.sass",
27 |     "LICENSE",
28 |     "README.md"
29 |   ],
30 |   "devDependencies": {
31 |     "gulp": "^3.9.0",
32 |     "gulp-ruby-sass": "^1.0.5"
33 |   }
34 | }
35 | 


--------------------------------------------------------------------------------
/sache.json:
--------------------------------------------------------------------------------
1 | {
2 |   "name": "css-spinners",
3 |   "description": "Simple CSS spinners and throbbers",
4 |   "tags": ["ui", "design", "spinners"]
5 | }
6 | 


--------------------------------------------------------------------------------
/sass/spinner/atebits.scss:
--------------------------------------------------------------------------------
 1 | @import "compass/css3";
 2 | 
 3 | $atebits-loader-size: 33px !default;
 4 | $atebits-loader-color: rgba(black, 0.5) !default;
 5 | $atebits-loader-speed: 8s !default;
 6 | 
 7 | $atebits-loader-segment: $atebits-loader-size / 11 !default;
 8 | 
 9 | @include keyframes(atebits-loader) {
10 |   0%    { @include rotateZ(0deg); }
11 | 
12 |   3%    { @include rotateZ(90deg); }
13 |   10%   { @include rotateZ(90deg); }
14 | 
15 |   13%   { @include rotateZ(180deg); }
16 |   20%   { @include rotateZ(180deg); }
17 | 
18 |   23%   { @include rotateZ(90deg); }
19 |   30%   { @include rotateZ(90deg); }
20 | 
21 |   33%   { @include rotateZ(180deg); }
22 |   40%   { @include rotateZ(180deg); }
23 | 
24 |   43%   { @include rotateZ(270deg); }
25 |   50%   { @include rotateZ(270deg); }
26 | 
27 |   53%   { @include rotateZ(180deg); }
28 |   60%   { @include rotateZ(180deg); }
29 | 
30 |   63%   { @include rotateZ(90deg); }
31 |   70%   { @include rotateZ(90deg); }
32 | 
33 |   73%   { @include rotateZ(0deg); }
34 |   80%   { @include rotateZ(0deg); }
35 | 
36 |   83%   { @include rotateZ(-90deg); }
37 |   90%   { @include rotateZ(-90deg); }
38 | 
39 |   93%   { @include rotateZ(0deg); }
40 | }
41 | 
42 | /* :not(:required) hides this rule from IE9 and below */
43 | .atebits-loader:not(:required) {
44 |   background: $atebits-loader-color;
45 |   display: inline-block;
46 |   width: $atebits-loader-segment * 3;
47 |   height: $atebits-loader-segment * 3;
48 |   overflow: hidden;
49 |   position: relative;
50 |   text-indent: -9999px;
51 | 
52 |   @include box-shadow(
53 |     $atebits-loader-color (-4 * $atebits-loader-segment) (-4 * $atebits-loader-segment) 0 0,
54 |     $atebits-loader-color ( 4 * $atebits-loader-segment) (-4 * $atebits-loader-segment) 0 0,
55 | 
56 |     $atebits-loader-color (-4 * $atebits-loader-segment) 0                              0 0,
57 |     $atebits-loader-color ( 4 * $atebits-loader-segment) 0                              0 0,
58 | 
59 |     $atebits-loader-color (-4 * $atebits-loader-segment) ( 4 * $atebits-loader-segment) 0 0,
60 |     $atebits-loader-color 0                              ( 4 * $atebits-loader-segment) 0 0,
61 |     $atebits-loader-color ( 4 * $atebits-loader-segment) ( 4 * $atebits-loader-segment) 0 0
62 |   );
63 | 
64 |   @include animation(atebits-loader $atebits-loader-speed infinite ease-in-out);
65 |   @include transform-origin(50%, 50%);
66 | }
67 | 


--------------------------------------------------------------------------------
/sass/spinner/ball.scss:
--------------------------------------------------------------------------------
  1 | @import "compass/css3";
  2 | 
  3 | $ball-loader-size: 200px !default;
  4 | $ball-loader-color: #f86 !default;
  5 | $ball-loader-speed: 1500ms !default;
  6 | 
  7 | $ball-loader-highlight: adjust-color($ball-loader-color, $lightness: 10%) !default;
  8 | $ball-loader-diameter: $ball-loader-size / 4 !default;
  9 | 
 10 | @include keyframes(ball-loader) {
 11 |   0%  {
 12 |     @include transform(translate3d(0, 0, 0) scale3d(1, 1, 1));
 13 |     @include animation-timing-function(ease-in);
 14 |   }
 15 |   45% {
 16 |     @include transform(translate3d(0, $ball-loader-size * 0.75, -10px) scale3d(1, 0.95, 1));
 17 |     @include animation-timing-function(ease-in);
 18 |   }
 19 |   50% {
 20 |     @include transform(translate3d(0, $ball-loader-size * 0.75, -10px) scale3d(1, 0.5, 1));
 21 |     @include animation-timing-function(linear);
 22 |   }
 23 |   55% {
 24 |     @include transform(translate3d(0, $ball-loader-size * 0.75, -10px) scale3d(1, 1.25, 1));
 25 |     @include animation-timing-function(ease-out);
 26 |   }
 27 | }
 28 | 
 29 | @include keyframes(ball-loader-highlight) {
 30 |   0%  {
 31 |     @include transform(skew(-20deg, 0) translate3d(0, $ball-loader-diameter / 20, 1px));
 32 |     @include animation-timing-function(ease-in);
 33 |   }
 34 |   45% {
 35 |     @include transform(skew(-30deg, 0) translate3d(0, 0, 1px));
 36 |     @include animation-timing-function(ease-in);
 37 |   }
 38 |   50% {
 39 |     @include transform(skew(-30deg, 0) translate3d(0, 0, 1px));
 40 |     @include animation-timing-function(linear);
 41 |   }
 42 |   55% {
 43 |     @include transform(skew(-30deg, 0) translate3d(0, 0, 1px));
 44 |     @include animation-timing-function(ease-out);
 45 |   }
 46 |   100%  {
 47 |     @include transform(skew(-20deg, 0) translate3d(0, $ball-loader-diameter / 20 , 1px));
 48 |     @include animation-timing-function(ease-in);
 49 |   }
 50 | }
 51 | 
 52 | @include keyframes(ball-loader-shadow) {
 53 |   0%  {
 54 |     @include transform(translate3d($ball-loader-size / 3, $ball-loader-size / 3, -1px) scale3d(1.25, 1.25, 1));
 55 |     @include animation-timing-function(ease-in);
 56 |   }
 57 |   45% {
 58 |     @include transform(translate3d($ball-loader-diameter / 4, -$ball-loader-diameter * 0.3, -1px));
 59 |     @include animation-timing-function(ease-in);
 60 |   }
 61 |   50% {
 62 |     @include transform(translate3d($ball-loader-diameter / 4, -$ball-loader-diameter * 0.3, -1px) scale3d(1, 1, 1));
 63 |     @include animation-timing-function(linear);
 64 |   }
 65 |   55% {
 66 |     @include transform(translate3d($ball-loader-diameter / 4, -$ball-loader-diameter * 0.3, -1px));
 67 |     @include animation-timing-function(ease-out);
 68 |   }
 69 |   100%  {
 70 |     @include transform(translate3d($ball-loader-size / 3, $ball-loader-size / 3, -1px) scale3d(1.25, 1.25, 1));
 71 |     @include animation-timing-function(ease-in);
 72 |   }
 73 | }
 74 | 
 75 | /* :not(:required) hides this rule from IE9 and below */
 76 | .ball-loader:not(:required) {
 77 |   position: relative;
 78 |   display: inline-block;
 79 |   // z-index: 1;
 80 |   font-size: 0;
 81 |   letter-spacing: -1px;
 82 |   
 83 |   border-radius: 100%;
 84 |   background: $ball-loader-color;
 85 |   
 86 |   width: $ball-loader-diameter;
 87 |   height: $ball-loader-diameter;
 88 |   
 89 |   @include transform-style(preserve-3d);
 90 |   @include transform(translate3d(0, 0, 0) scale3d(1, 1, 1));
 91 |   @include transform-origin(0, 100%);
 92 |   @include animation(ball-loader $ball-loader-speed infinite linear);
 93 |   
 94 |   &::after {
 95 |     content: '';
 96 |     
 97 |     position: absolute;
 98 |     top: $ball-loader-diameter * 0.09;
 99 |     left: $ball-loader-diameter * 0.11;
100 |     // z-index: 1;
101 |       
102 |     width: $ball-loader-diameter * 0.3;
103 |     height: $ball-loader-diameter * 0.3;
104 |     
105 |     background: $ball-loader-highlight;
106 |     border-radius: 100%;
107 |     
108 |     @include transform(skew(-20deg, 0) translate3d(0, $ball-loader-diameter / 20, 1px));
109 |     @include animation(ball-loader-highlight $ball-loader-speed infinite linear);
110 |   }
111 |   
112 |   &::before {
113 |     content: '';
114 |     
115 |     position: absolute;
116 |     top: $ball-loader-diameter;
117 |     left: $ball-loader-diameter * 0.11;
118 |       
119 |     width: $ball-loader-diameter;
120 |     height: $ball-loader-diameter * 0.3;
121 |     
122 |     background: rgba(black, 0.2);
123 |     border-radius: 100%;
124 |     
125 |     @include transform(translate3d($ball-loader-size / 3, $ball-loader-size / 3, -1px) scale3d(1.25, 1.25, 1));
126 |     @include animation(ball-loader-shadow $ball-loader-speed infinite linear);
127 |     
128 |     @include filter(blur(1px));
129 |   }
130 | }
131 | 


--------------------------------------------------------------------------------
/sass/spinner/circles.scss:
--------------------------------------------------------------------------------
 1 | @import "compass/css3";
 2 | 
 3 | $circles-loader-size: 50px !default;
 4 | $circles-loader-speed: 3s !default;
 5 | $circles-loader-colors: rgba(#fc3, 0.9) rgba(#f60, 0.6)  rgba(#f30, 0.4) !default;
 6 | 
 7 | $circles-loader-radius: $circles-loader-size / 4 !default;
 8 | $circles-loader-diameter: $circles-loader-size / 2 !default;
 9 | 
10 | $circles-loader-1: nth($circles-loader-colors, 1) !default;
11 | $circles-loader-2: nth($circles-loader-colors, 2) !default;
12 | $circles-loader-3: nth($circles-loader-colors, 3) !default;
13 | 
14 | @include keyframes(circles-loader) {
15 |   0%  { @include rotateZ(-2*360deg); }
16 |   50% { @include rotateZ(2*360deg); }
17 | }
18 | 
19 | /* :not(:required) hides this rule from IE9 and below */
20 | .circles-loader:not(:required) {
21 |   position: relative;
22 |   text-indent: -9999px;
23 | 
24 |   display: inline-block;
25 |   width: $circles-loader-diameter;
26 |   height: $circles-loader-diameter;
27 | 
28 |   background: $circles-loader-1;
29 |   border-radius: 100%;
30 |   
31 |   //@include box-shadow(white 0 -($circles-loader-segment/2) 0 0 inset);
32 |   
33 |   &::before {
34 |     background: $circles-loader-2;
35 |     border-radius: 100%;
36 |     content: '';
37 |     position: absolute;
38 |     width: $circles-loader-diameter;
39 |     height: $circles-loader-diameter;
40 |     top: $circles-loader-radius + ($circles-loader-radius * sin(30deg));
41 |     left: -$circles-loader-radius * cos(30deg);
42 |   }
43 |   
44 |   &::after {
45 |     background: $circles-loader-3;
46 |     border-radius: 100%;
47 |     content: '';
48 |     position: absolute;
49 |     width: $circles-loader-diameter;
50 |     height: $circles-loader-diameter;
51 |     top: $circles-loader-radius + ($circles-loader-radius * sin(30deg));
52 |     left: $circles-loader-radius * cos(30deg);
53 |   }
54 |   
55 |   @include animation(circles-loader $circles-loader-speed infinite ease-in-out);
56 |   @include transform-origin(50%, 100%);
57 | }
58 | 


--------------------------------------------------------------------------------
/sass/spinner/dots.scss:
--------------------------------------------------------------------------------
  1 | @import "compass/css3";
  2 | 
  3 | $dots-loader-size: 49px !default;
  4 | $dots-loader-colors: #f86 #fc6 #6d7 #4ae !default;
  5 | $dots-loader-speed: 5s !default;
  6 | 
  7 | $dots-loader-1: nth($dots-loader-colors, 1) !default;
  8 | $dots-loader-2: nth($dots-loader-colors, 2) !default;
  9 | $dots-loader-3: nth($dots-loader-colors, 3) !default;
 10 | $dots-loader-4: nth($dots-loader-colors, 4) !default;
 11 | 
 12 | $dots-loader-segment: $dots-loader-size / 7 !default;
 13 | $dots-loader-dot-size: $dots-loader-segment * 3 !default;
 14 | 
 15 | $dots-loader-position-1: (-2 * $dots-loader-segment) (-2 * $dots-loader-segment);
 16 | $dots-loader-position-2: ( 2 * $dots-loader-segment) (-2 * $dots-loader-segment);
 17 | $dots-loader-position-3: ( 2 * $dots-loader-segment) ( 2 * $dots-loader-segment);
 18 | $dots-loader-position-4: (-2 * $dots-loader-segment) ( 2 * $dots-loader-segment);
 19 | 
 20 | @include keyframes(dots-loader) {
 21 |   0%   {
 22 |     @include box-shadow(
 23 |       $dots-loader-1 $dots-loader-position-1 0 $dots-loader-segment,
 24 |       $dots-loader-2 $dots-loader-position-2 0 $dots-loader-segment,
 25 |       $dots-loader-3 $dots-loader-position-3 0 $dots-loader-segment,
 26 |       $dots-loader-4 $dots-loader-position-4 0 $dots-loader-segment
 27 |     );
 28 |   }
 29 |   8.33% {
 30 |     @include box-shadow(
 31 |       $dots-loader-1 $dots-loader-position-2 0 $dots-loader-segment,
 32 |       $dots-loader-2 $dots-loader-position-2 0 $dots-loader-segment,
 33 |       $dots-loader-3 $dots-loader-position-3 0 $dots-loader-segment,
 34 |       $dots-loader-4 $dots-loader-position-4 0 $dots-loader-segment
 35 |     );
 36 |   }
 37 |   16.67% {
 38 |     @include box-shadow(
 39 |       $dots-loader-1 $dots-loader-position-3 0 $dots-loader-segment,
 40 |       $dots-loader-2 $dots-loader-position-3 0 $dots-loader-segment,
 41 |       $dots-loader-3 $dots-loader-position-3 0 $dots-loader-segment,
 42 |       $dots-loader-4 $dots-loader-position-4 0 $dots-loader-segment
 43 |     );
 44 |   }
 45 |   25% {
 46 |     @include box-shadow(
 47 |       $dots-loader-1 $dots-loader-position-4 0 $dots-loader-segment,
 48 |       $dots-loader-2 $dots-loader-position-4 0 $dots-loader-segment,
 49 |       $dots-loader-3 $dots-loader-position-4 0 $dots-loader-segment,
 50 |       $dots-loader-4 $dots-loader-position-4 0 $dots-loader-segment
 51 |     );
 52 |   }
 53 |   33.33% {
 54 |     @include box-shadow(
 55 |       $dots-loader-1 $dots-loader-position-1 0 $dots-loader-segment,
 56 |       $dots-loader-2 $dots-loader-position-4 0 $dots-loader-segment,
 57 |       $dots-loader-3 $dots-loader-position-1 0 $dots-loader-segment,
 58 |       $dots-loader-4 $dots-loader-position-1 0 $dots-loader-segment
 59 |     );
 60 |   }
 61 |   41.67% {
 62 |     @include box-shadow(
 63 |       $dots-loader-1 $dots-loader-position-2 0 $dots-loader-segment,
 64 |       $dots-loader-2 $dots-loader-position-4 0 $dots-loader-segment,
 65 |       $dots-loader-3 $dots-loader-position-1 0 $dots-loader-segment,
 66 |       $dots-loader-4 $dots-loader-position-2 0 $dots-loader-segment
 67 |     );
 68 |   }
 69 |   50% {
 70 |     @include box-shadow(
 71 |       $dots-loader-1 $dots-loader-position-3 0 $dots-loader-segment,
 72 |       $dots-loader-2 $dots-loader-position-4 0 $dots-loader-segment,
 73 |       $dots-loader-3 $dots-loader-position-1 0 $dots-loader-segment,
 74 |       $dots-loader-4 $dots-loader-position-2 0 $dots-loader-segment
 75 |     );
 76 |   }
 77 |   58.33% {
 78 |     @include box-shadow(
 79 |       $dots-loader-1 $dots-loader-position-4 0 $dots-loader-segment,
 80 |       $dots-loader-2 $dots-loader-position-4 0 $dots-loader-segment,
 81 |       $dots-loader-3 $dots-loader-position-1 0 $dots-loader-segment,
 82 |       $dots-loader-4 $dots-loader-position-2 0 $dots-loader-segment
 83 |     );
 84 |   }
 85 |   66.67% {
 86 |     @include box-shadow(
 87 |       $dots-loader-1 $dots-loader-position-1 0 $dots-loader-segment,
 88 |       $dots-loader-2 $dots-loader-position-1 0 $dots-loader-segment,
 89 |       $dots-loader-3 $dots-loader-position-1 0 $dots-loader-segment,
 90 |       $dots-loader-4 $dots-loader-position-2 0 $dots-loader-segment
 91 |     );
 92 |   }
 93 |   75% {
 94 |     @include box-shadow(
 95 |       $dots-loader-1 $dots-loader-position-2 0 $dots-loader-segment,
 96 |       $dots-loader-2 $dots-loader-position-2 0 $dots-loader-segment,
 97 |       $dots-loader-3 $dots-loader-position-2 0 $dots-loader-segment,
 98 |       $dots-loader-4 $dots-loader-position-2 0 $dots-loader-segment
 99 |     );
100 |   }
101 |   83.33% {
102 |     @include box-shadow(
103 |       $dots-loader-1 $dots-loader-position-3 0 $dots-loader-segment,
104 |       $dots-loader-2 $dots-loader-position-2 0 $dots-loader-segment,
105 |       $dots-loader-3 $dots-loader-position-3 0 $dots-loader-segment,
106 |       $dots-loader-4 $dots-loader-position-3 0 $dots-loader-segment
107 |     );
108 |   }
109 |   91.67% {
110 |     @include box-shadow(
111 |       $dots-loader-1 $dots-loader-position-4 0 $dots-loader-segment,
112 |       $dots-loader-2 $dots-loader-position-2 0 $dots-loader-segment,
113 |       $dots-loader-3 $dots-loader-position-3 0 $dots-loader-segment,
114 |       $dots-loader-4 $dots-loader-position-4 0 $dots-loader-segment
115 |     );
116 |   }
117 |   100%   {
118 |     @include box-shadow(
119 |       $dots-loader-1 $dots-loader-position-1 0 $dots-loader-segment,
120 |       $dots-loader-2 $dots-loader-position-2 0 $dots-loader-segment,
121 |       $dots-loader-3 $dots-loader-position-3 0 $dots-loader-segment,
122 |       $dots-loader-4 $dots-loader-position-4 0 $dots-loader-segment
123 |     );
124 |   }
125 | }
126 | 
127 | /* :not(:required) hides this rule from IE9 and below */
128 | .dots-loader:not(:required) {
129 |   overflow: hidden;
130 |   position: relative;
131 |   text-indent: -9999px;
132 | 
133 |   display: inline-block;
134 |   width: $dots-loader-segment;
135 |   height: $dots-loader-segment;
136 | 
137 |   background: transparent;
138 |   border-radius: 100%;
139 |   @include box-shadow(
140 |     $dots-loader-1 $dots-loader-position-1 0 $dots-loader-segment,
141 |     $dots-loader-2 $dots-loader-position-2 0 $dots-loader-segment,
142 |     $dots-loader-3 $dots-loader-position-3 0 $dots-loader-segment,
143 |     $dots-loader-4 $dots-loader-position-4 0 $dots-loader-segment
144 |   );
145 | 
146 |   @include animation(dots-loader $dots-loader-speed infinite ease-in-out);
147 |   @include transform-origin(50%, 50%);
148 | }
149 | 


--------------------------------------------------------------------------------
/sass/spinner/echo.scss:
--------------------------------------------------------------------------------
 1 | @import "compass/css3";
 2 | // generic transform
 3 | @mixin transform($transform) {
 4 |      -moz-transform: $transform;
 5 |       -ms-transform: $transform;
 6 |   -webkit-transform: $transform;
 7 |           transform: $transform;
 8 | }
 9 | 
10 | $echo-loader-color: #FF0000 !default;
11 | $echo-loader-size: 40px !default;
12 | $echo-loader-speed: 1.4s ease-in !default;
13 | $echo-loader-iteration-count: infinite !default;
14 | $echo-loader-border: 6px !default;
15 | 
16 | /* :not(:required) hides this rule from IE9 and below */
17 | .echo-loader:not(:required) {
18 |   width: $echo-loader-size;
19 |   height: $echo-loader-size;
20 |   border: $echo-loader-border solid $echo-loader-color;
21 |   @include border-radius(50%);
22 |   animation: echo-loader $echo-loader-speed;
23 |   animation-iteration-count: $echo-loader-iteration-count;
24 |   display: inline-block;
25 |   text-indent: 100%;
26 |   overflow: hidden;
27 | }
28 | 
29 | @include keyframes(echo-loader) {
30 |   0%{
31 |     @include transform(scale(0));
32 |     opacity: 0.0;
33 |   }
34 |   25%{
35 |     @include transform(scale(0));
36 |     opacity: .1;
37 |   }
38 |   50%{
39 |     @include transform(scale(0.1));
40 |     opacity: .3;
41 |   }
42 |   75%{
43 |     @include transform(scale(0.5));
44 |     opacity: .5;
45 |   }
46 |   100%{
47 |     @include transform(scale(1));
48 |     opacity: 0;
49 |   }
50 | }


--------------------------------------------------------------------------------
/sass/spinner/flower.scss:
--------------------------------------------------------------------------------
 1 | @import "compass/css3";
 2 | 
 3 | $flower-loader-size: 40px !default;
 4 | $flower-loader-colors: #fd8 #e96 !default;
 5 | $flower-loader-speed: 5s !default;
 6 | 
 7 | $flower-loader-petal: nth($flower-loader-colors, 1) !default;
 8 | $flower-loader-center: nth($flower-loader-colors, 2) !default;
 9 | 
10 | $flower-loader-segment: $flower-loader-size / 10 !default;
11 | $flower-loader-dot-size: $flower-loader-segment * 4 !default;
12 | 
13 | @include keyframes(flower-loader) {
14 |   0%   {
15 |     @include rotateZ(0deg);
16 |     @include box-shadow(
17 |       white 0 0 15px 0,
18 |       $flower-loader-petal (-3 * $flower-loader-segment) (-3 * $flower-loader-segment) 0 $flower-loader-segment,
19 |       $flower-loader-petal ( 3 * $flower-loader-segment) (-3 * $flower-loader-segment) 0 $flower-loader-segment,
20 |       $flower-loader-petal ( 3 * $flower-loader-segment) ( 3 * $flower-loader-segment) 0 $flower-loader-segment,
21 |       $flower-loader-petal (-3 * $flower-loader-segment) ( 3 * $flower-loader-segment) 0 $flower-loader-segment
22 |     );
23 |   }
24 |   50% {
25 |     @include rotateZ(3 * 360deg);
26 |     @include box-shadow(
27 |       white 0 0 15px 0,
28 |       $flower-loader-petal ( 3 * $flower-loader-segment) ( 3 * $flower-loader-segment) 0 $flower-loader-segment,
29 |       $flower-loader-petal (-3 * $flower-loader-segment) ( 3 * $flower-loader-segment) 0 $flower-loader-segment,
30 |       $flower-loader-petal (-3 * $flower-loader-segment) (-3 * $flower-loader-segment) 0 $flower-loader-segment,
31 |       $flower-loader-petal ( 3 * $flower-loader-segment) (-3 * $flower-loader-segment) 0 $flower-loader-segment
32 |     );
33 |   }
34 | }
35 | 
36 | /* :not(:required) hides this rule from IE9 and below */
37 | .flower-loader:not(:required) {
38 |   overflow: hidden;
39 |   position: relative;
40 |   text-indent: -9999px;
41 | 
42 |   display: inline-block;
43 |   width: $flower-loader-dot-size;
44 |   height: $flower-loader-dot-size;
45 | 
46 |   background: $flower-loader-center;
47 |   border-radius: 100%;
48 |   @include box-shadow(
49 |     white 0 0 15px 0,
50 |     $flower-loader-petal (-3 * $flower-loader-segment) (-3 * $flower-loader-segment) 0 $flower-loader-segment,
51 |     $flower-loader-petal ( 3 * $flower-loader-segment) (-3 * $flower-loader-segment) 0 $flower-loader-segment,
52 |     $flower-loader-petal ( 3 * $flower-loader-segment) ( 3 * $flower-loader-segment) 0 $flower-loader-segment,
53 |     $flower-loader-petal (-3 * $flower-loader-segment) ( 3 * $flower-loader-segment) 0 $flower-loader-segment
54 |   );
55 | 
56 |   @include animation(flower-loader $flower-loader-speed infinite ease-in-out);
57 |   @include transform-origin(50%, 50%);
58 | }
59 | 


--------------------------------------------------------------------------------
/sass/spinner/gauge.scss:
--------------------------------------------------------------------------------
 1 | @import "compass/css3";
 2 | 
 3 | $gauge-loader-size: 64px !default;
 4 | $gauge-loader-speed: 4000ms !default;
 5 | $gauge-loader-color: #6ca !default;
 6 | 
 7 | @include keyframes(gauge-loader) {
 8 |   0%   { @include rotateZ(-50deg); }
 9 |   
10 |   10%  { @include rotateZ(20deg); }
11 |   20%  { @include rotateZ(60deg); }
12 |   24%  { @include rotateZ(60deg); }
13 |   
14 |   40%  { @include rotateZ(-20deg); }
15 |   54%  { @include rotateZ(70deg); }
16 |   56%  { @include rotateZ(78deg); }
17 |   58%  { @include rotateZ(73deg); }
18 |   60%  { @include rotateZ(75deg); }
19 |   62%  { @include rotateZ(70deg); }
20 |   
21 |   70%  { @include rotateZ(-20deg); }
22 |   
23 |   80%  { @include rotateZ(20deg); }
24 |   83%  { @include rotateZ(25deg); }
25 |   86%  { @include rotateZ(20deg); }
26 |   89%  { @include rotateZ(25deg); }
27 |   
28 |   100% { @include rotateZ(-50deg); }
29 | }
30 | 
31 | /* :not(:required) hides this rule from IE9 and below */
32 | .gauge-loader:not(:required) {
33 |   background: $gauge-loader-color;
34 |   @include border-top-radius($gauge-loader-size / 2);
35 |   display: inline-block;
36 |   width: $gauge-loader-size;
37 |   height: $gauge-loader-size / 2;
38 |   overflow: hidden;
39 |   position: relative;
40 |   text-indent: -9999px;
41 |   
42 |   &::before {
43 |     @include animation(gauge-loader $gauge-loader-speed infinite ease);
44 |     background: white;
45 |     @include border-radius($gauge-loader-size / 32);
46 |     content: '';
47 |     position: absolute;
48 |     left: ($gauge-loader-size / 2) - ($gauge-loader-size / 32);
49 |     top: ($gauge-loader-size / 12);
50 |     width: ($gauge-loader-size / 16);
51 |     height: (5 * $gauge-loader-size / 12);
52 |     @include transform-origin(50%, 100%);
53 |   }
54 |   
55 |   &::after {
56 |     content: '';
57 |     background: white;
58 |     @include border-radius($gauge-loader-size / 8);
59 |     position: absolute;
60 |     left: ($gauge-loader-size / 2) - ($gauge-loader-size / 10);
61 |     top: ($gauge-loader-size / 2) - ($gauge-loader-size / 10);
62 |     width: ($gauge-loader-size / 5);
63 |     height: ($gauge-loader-size / 5);
64 |   }
65 | }
66 | 


--------------------------------------------------------------------------------
/sass/spinner/heartbeat.scss:
--------------------------------------------------------------------------------
 1 | @import "compass/css3";
 2 | 
 3 | $heartbeat-loader-color: #e87 !default;
 4 | $heartbeat-loader-size: 36px !default; // must be an integer divisible by 2 and 3
 5 | $heartbeat-loader-rotation: rotate(45deg) !default;
 6 | 
 7 | @include keyframes(heartbeat-loader) {
 8 |   0%  { @include transform($heartbeat-loader-rotation scale(1));   }
 9 |   14% { @include transform($heartbeat-loader-rotation scale(1.3)); }
10 |   28% { @include transform($heartbeat-loader-rotation scale(1));   }
11 |   42% { @include transform($heartbeat-loader-rotation scale(1.3)); }
12 |   70% { @include transform($heartbeat-loader-rotation scale(1));   }
13 | }
14 | 
15 | /* :not(:required) hides this rule from IE9 and below */
16 | .heartbeat-loader:not(:required) {
17 |   @include animation(heartbeat-loader 1300ms ease 0s infinite normal);
18 |   
19 |   display: inline-block;
20 |   position: relative;  
21 |   overflow: hidden;
22 |   text-indent: -9999px;
23 |   width: $heartbeat-loader-size;  
24 |   height: $heartbeat-loader-size;
25 |   @include transform($heartbeat-loader-rotation scale(1));
26 |   @include transform-origin(50%, 50%);
27 |   
28 |   &:after, &:before {
29 |     position: absolute;
30 |     content: "";  
31 |     background: $heartbeat-loader-color;
32 |   }
33 |   
34 |   &:before {
35 |     @include border-left-radius($heartbeat-loader-size / 3);
36 |     top: ($heartbeat-loader-size/3);
37 |     left: 0;
38 |     width: $heartbeat-loader-size;
39 |     height: (2 * $heartbeat-loader-size / 3);
40 |   }
41 |   
42 |   &:after {
43 |     @include border-top-radius($heartbeat-loader-size / 3);
44 |     top: 0;
45 |     left: ($heartbeat-loader-size / 3);
46 |     width: (2 * $heartbeat-loader-size / 3);
47 |     height: ($heartbeat-loader-size / 3);
48 |   }
49 | } 
50 | 


--------------------------------------------------------------------------------
/sass/spinner/hexdots.scss:
--------------------------------------------------------------------------------
  1 | @import "compass/css3";
  2 | 
  3 | $hexdots-loader-size: 49px !default;
  4 | $hexdots-loader-color: #999 !default;
  5 | $hexdots-loader-colors: darken($hexdots-loader-color, 20%) $hexdots-loader-color $hexdots-loader-color $hexdots-loader-color $hexdots-loader-color $hexdots-loader-color $hexdots-loader-color !default;
  6 | $hexdots-loader-speed: 5s !default;
  7 | $hexdots-loader-1: nth($hexdots-loader-colors, 1);
  8 | $hexdots-loader-2: nth($hexdots-loader-colors, 2);
  9 | $hexdots-loader-3: nth($hexdots-loader-colors, 3);
 10 | $hexdots-loader-4: nth($hexdots-loader-colors, 4);
 11 | $hexdots-loader-5: nth($hexdots-loader-colors, 5);
 12 | $hexdots-loader-6: nth($hexdots-loader-colors, 6);
 13 | $hexdots-loader-7: nth($hexdots-loader-colors, 7);
 14 | 
 15 | $hexdots-loader-segment: $hexdots-loader-size / 7 !default;
 16 | $hexdots-loader-dot-size: $hexdots-loader-segment * 3 !default;
 17 | 
 18 | $hexdots-loader-position-1: 0 -30px;
 19 | $hexdots-loader-position-2: 26px -15px;
 20 | $hexdots-loader-position-3: 26px 15px;
 21 | $hexdots-loader-position-4: 0 30px;
 22 | $hexdots-loader-position-5: -26px 15px;
 23 | $hexdots-loader-position-6: -26px -15px;
 24 | 
 25 | @include keyframes(hexdots-loader) {
 26 |   0% {
 27 |     @include box-shadow(
 28 |       $hexdots-loader-1 $hexdots-loader-position-1 0 $hexdots-loader-segment,
 29 |       $hexdots-loader-2 $hexdots-loader-position-1 0 $hexdots-loader-segment,
 30 |       $hexdots-loader-3 $hexdots-loader-position-2 0 $hexdots-loader-segment,
 31 |       $hexdots-loader-4 $hexdots-loader-position-3 0 $hexdots-loader-segment,
 32 |       $hexdots-loader-5 $hexdots-loader-position-4 0 $hexdots-loader-segment,
 33 |       $hexdots-loader-6 $hexdots-loader-position-5 0 $hexdots-loader-segment,
 34 |       $hexdots-loader-7 $hexdots-loader-position-6 0 $hexdots-loader-segment
 35 |       );
 36 |   }
 37 |   8.33% {
 38 |     @include box-shadow(
 39 |       $hexdots-loader-1 $hexdots-loader-position-2 0 $hexdots-loader-segment,
 40 |       $hexdots-loader-2 $hexdots-loader-position-2 0 $hexdots-loader-segment,
 41 |       $hexdots-loader-3 $hexdots-loader-position-2 0 $hexdots-loader-segment,
 42 |       $hexdots-loader-4 $hexdots-loader-position-3 0 $hexdots-loader-segment,
 43 |       $hexdots-loader-5 $hexdots-loader-position-4 0 $hexdots-loader-segment,
 44 |       $hexdots-loader-6 $hexdots-loader-position-5 0 $hexdots-loader-segment,
 45 |       $hexdots-loader-7 $hexdots-loader-position-6 0 $hexdots-loader-segment
 46 |       );
 47 |   }
 48 |   16.67% {
 49 |     @include box-shadow(
 50 |       $hexdots-loader-1 $hexdots-loader-position-3 0 $hexdots-loader-segment,
 51 |       $hexdots-loader-2 $hexdots-loader-position-3 0 $hexdots-loader-segment,
 52 |       $hexdots-loader-3 $hexdots-loader-position-3 0 $hexdots-loader-segment,
 53 |       $hexdots-loader-4 $hexdots-loader-position-3 0 $hexdots-loader-segment,
 54 |       $hexdots-loader-5 $hexdots-loader-position-4 0 $hexdots-loader-segment,
 55 |       $hexdots-loader-6 $hexdots-loader-position-5 0 $hexdots-loader-segment,
 56 |       $hexdots-loader-7 $hexdots-loader-position-6 0 $hexdots-loader-segment
 57 |       );
 58 |   }
 59 |   25% {
 60 |     @include box-shadow (
 61 |       $hexdots-loader-1 $hexdots-loader-position-4 0 $hexdots-loader-segment,
 62 |       $hexdots-loader-2 $hexdots-loader-position-4 0 $hexdots-loader-segment,
 63 |       $hexdots-loader-3 $hexdots-loader-position-4 0 $hexdots-loader-segment,
 64 |       $hexdots-loader-4 $hexdots-loader-position-4 0 $hexdots-loader-segment,
 65 |       $hexdots-loader-5 $hexdots-loader-position-4 0 $hexdots-loader-segment,
 66 |       $hexdots-loader-6 $hexdots-loader-position-5 0 $hexdots-loader-segment,
 67 |       $hexdots-loader-7 $hexdots-loader-position-6 0 $hexdots-loader-segment
 68 |       );
 69 |   }
 70 |   33.33% {
 71 |     @include box-shadow(
 72 |       $hexdots-loader-1 $hexdots-loader-position-5 0 $hexdots-loader-segment,
 73 |       $hexdots-loader-2 $hexdots-loader-position-5 0 $hexdots-loader-segment,
 74 |       $hexdots-loader-3 $hexdots-loader-position-5 0 $hexdots-loader-segment,
 75 |       $hexdots-loader-4 $hexdots-loader-position-5 0 $hexdots-loader-segment,
 76 |       $hexdots-loader-5 $hexdots-loader-position-5 0 $hexdots-loader-segment,
 77 |       $hexdots-loader-6 $hexdots-loader-position-5 0 $hexdots-loader-segment,
 78 |       $hexdots-loader-7 $hexdots-loader-position-6 0 $hexdots-loader-segment
 79 |       );
 80 |   }
 81 |   41.67% {
 82 |     @include box-shadow(
 83 |       $hexdots-loader-1 $hexdots-loader-position-6 0 $hexdots-loader-segment,
 84 |       $hexdots-loader-2 $hexdots-loader-position-6 0 $hexdots-loader-segment,
 85 |       $hexdots-loader-3 $hexdots-loader-position-6 0 $hexdots-loader-segment,
 86 |       $hexdots-loader-4 $hexdots-loader-position-6 0 $hexdots-loader-segment,
 87 |       $hexdots-loader-5 $hexdots-loader-position-6 0 $hexdots-loader-segment,
 88 |       $hexdots-loader-6 $hexdots-loader-position-6 0 $hexdots-loader-segment,
 89 |       $hexdots-loader-7 $hexdots-loader-position-6 0 $hexdots-loader-segment
 90 |       );
 91 |   }
 92 |   50% {
 93 |     @include box-shadow(
 94 |       $hexdots-loader-1 $hexdots-loader-position-1 0 $hexdots-loader-segment,
 95 |       $hexdots-loader-2 $hexdots-loader-position-1 0 $hexdots-loader-segment,
 96 |       $hexdots-loader-3 $hexdots-loader-position-1 0 $hexdots-loader-segment,
 97 |       $hexdots-loader-4 $hexdots-loader-position-1 0 $hexdots-loader-segment,
 98 |       $hexdots-loader-5 $hexdots-loader-position-1 0 $hexdots-loader-segment,
 99 |       $hexdots-loader-6 $hexdots-loader-position-1 0 $hexdots-loader-segment,
100 |       $hexdots-loader-7 $hexdots-loader-position-1 0 $hexdots-loader-segment
101 |       );
102 |   }
103 |   58.33% {
104 |     @include box-shadow (
105 |       $hexdots-loader-1 $hexdots-loader-position-2 0 $hexdots-loader-segment,
106 |       $hexdots-loader-2 $hexdots-loader-position-1 0 $hexdots-loader-segment,
107 |       $hexdots-loader-3 $hexdots-loader-position-2 0 $hexdots-loader-segment,
108 |       $hexdots-loader-4 $hexdots-loader-position-2 0 $hexdots-loader-segment,
109 |       $hexdots-loader-5 $hexdots-loader-position-2 0 $hexdots-loader-segment,
110 |       $hexdots-loader-6 $hexdots-loader-position-2 0 $hexdots-loader-segment,
111 |       $hexdots-loader-7 $hexdots-loader-position-2 0 $hexdots-loader-segment
112 |       );
113 |   }
114 |   66.67% {
115 |     @include box-shadow (
116 |       $hexdots-loader-1 $hexdots-loader-position-3 0 $hexdots-loader-segment,
117 |       $hexdots-loader-2 $hexdots-loader-position-1 0 $hexdots-loader-segment,
118 |       $hexdots-loader-3 $hexdots-loader-position-2 0 $hexdots-loader-segment,
119 |       $hexdots-loader-4 $hexdots-loader-position-3 0 $hexdots-loader-segment,
120 |       $hexdots-loader-5 $hexdots-loader-position-3 0 $hexdots-loader-segment,
121 |       $hexdots-loader-6 $hexdots-loader-position-3 0 $hexdots-loader-segment,
122 |       $hexdots-loader-7 $hexdots-loader-position-3 0 $hexdots-loader-segment
123 |       );
124 |   }
125 |   75% {
126 |     @include box-shadow (
127 |       $hexdots-loader-1 $hexdots-loader-position-4 0 $hexdots-loader-segment,
128 |       $hexdots-loader-2 $hexdots-loader-position-1 0 $hexdots-loader-segment,
129 |       $hexdots-loader-3 $hexdots-loader-position-2 0 $hexdots-loader-segment,
130 |       $hexdots-loader-4 $hexdots-loader-position-3 0 $hexdots-loader-segment,
131 |       $hexdots-loader-5 $hexdots-loader-position-4 0 $hexdots-loader-segment,
132 |       $hexdots-loader-6 $hexdots-loader-position-4 0 $hexdots-loader-segment,
133 |       $hexdots-loader-7 $hexdots-loader-position-4 0 $hexdots-loader-segment
134 |       );
135 |   }
136 |   83.33% {
137 |     @include box-shadow (
138 |       $hexdots-loader-1 $hexdots-loader-position-5 0 $hexdots-loader-segment,
139 |       $hexdots-loader-2 $hexdots-loader-position-1 0 $hexdots-loader-segment,
140 |       $hexdots-loader-3 $hexdots-loader-position-2 0 $hexdots-loader-segment,
141 |       $hexdots-loader-4 $hexdots-loader-position-3 0 $hexdots-loader-segment,
142 |       $hexdots-loader-5 $hexdots-loader-position-4 0 $hexdots-loader-segment,
143 |       $hexdots-loader-6 $hexdots-loader-position-5 0 $hexdots-loader-segment,
144 |       $hexdots-loader-7 $hexdots-loader-position-5 0 $hexdots-loader-segment
145 |       );
146 |   }
147 |   91.67% {
148 |     @include box-shadow (
149 |       $hexdots-loader-1 $hexdots-loader-position-6 0 $hexdots-loader-segment,
150 |       $hexdots-loader-2 $hexdots-loader-position-1 0 $hexdots-loader-segment,
151 |       $hexdots-loader-3 $hexdots-loader-position-2 0 $hexdots-loader-segment,
152 |       $hexdots-loader-4 $hexdots-loader-position-3 0 $hexdots-loader-segment,
153 |       $hexdots-loader-5 $hexdots-loader-position-4 0 $hexdots-loader-segment,
154 |       $hexdots-loader-6 $hexdots-loader-position-5 0 $hexdots-loader-segment,
155 |       $hexdots-loader-7 $hexdots-loader-position-6 0 $hexdots-loader-segment
156 |       );
157 |   }
158 |   100% {
159 |     @include box-shadow (
160 |       $hexdots-loader-1 $hexdots-loader-position-1 0 $hexdots-loader-segment,
161 |       $hexdots-loader-2 $hexdots-loader-position-1 0 $hexdots-loader-segment,
162 |       $hexdots-loader-3 $hexdots-loader-position-2 0 $hexdots-loader-segment,
163 |       $hexdots-loader-4 $hexdots-loader-position-3 0 $hexdots-loader-segment,
164 |       $hexdots-loader-5 $hexdots-loader-position-4 0 $hexdots-loader-segment,
165 |       $hexdots-loader-6 $hexdots-loader-position-5 0 $hexdots-loader-segment,
166 |       $hexdots-loader-7 $hexdots-loader-position-6 0 $hexdots-loader-segment
167 |       );
168 |   }
169 | }
170 | 
171 | /* :not(:required) hides this rule from IE9 and below */
172 | .hexdots-loader:not(:required) {
173 |   overflow: hidden;
174 |   position: relative;
175 |   text-indent: -9999px;
176 | 
177 |   display: inline-block;
178 |   width: $hexdots-loader-segment;
179 |   height: $hexdots-loader-segment;
180 | 
181 |   background: transparent;
182 |   border-radius: 100%;
183 |   @include box-shadow(
184 |     $hexdots-loader-1 $hexdots-loader-position-1 0 $hexdots-loader-segment,
185 |     $hexdots-loader-2 $hexdots-loader-position-2 0 $hexdots-loader-segment,
186 |     $hexdots-loader-3 $hexdots-loader-position-3 0 $hexdots-loader-segment,
187 |     $hexdots-loader-4 $hexdots-loader-position-4 0 $hexdots-loader-segment,
188 |     $hexdots-loader-5 $hexdots-loader-position-4 0 $hexdots-loader-segment,
189 |     $hexdots-loader-6 $hexdots-loader-position-4 0 $hexdots-loader-segment
190 |   );
191 | 
192 |   @include animation(hexdots-loader $hexdots-loader-speed infinite ease-in-out);
193 |   @include transform-origin(50%, 50%);
194 | }
195 | 


--------------------------------------------------------------------------------
/sass/spinner/inner-circles.scss:
--------------------------------------------------------------------------------
 1 | @import "compass/css3";
 2 | 
 3 | $inner-circles-loader-size: 50px !default;
 4 | $inner-circles-loader-color-1: #19a598 !default;
 5 | $inner-circles-loader-color-2: #c7efcf !default;
 6 | $inner-circles-loader-color-3: #eef5db !default;
 7 | $inner-circles-loader-speed: 3s !default;
 8 | 
 9 | /* :not(:required) hides this rule from IE9 and below */
10 | .inner-circles-loader:not(:required) {
11 |   @include transform(translate3d(0, 0, 0));
12 |   position: relative;
13 |   display: inline-block;
14 |   width: $inner-circles-loader-size;
15 |   height: $inner-circles-loader-size;
16 |   background: rgba($inner-circles-loader-color-1, .5);
17 |   border-radius: 50%;
18 |   overflow: hidden;
19 |   text-indent: -9999px;
20 | 
21 |   /* Hides inner circles outside base circle at safari */
22 |   -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
23 | 
24 |   &:before, &:after {
25 |     content: '';
26 |     position: absolute;
27 |     top: 0;
28 |     display: inline-block;
29 |     width: $inner-circles-loader-size;
30 |     height: $inner-circles-loader-size;
31 |     border-radius: 50%;
32 |   }
33 | 
34 |   &:before {
35 |     @include animation(inner-circles-loader $inner-circles-loader-speed infinite);
36 |     @include transform-origin(0, 50%);
37 |     left: 0;
38 |     background: $inner-circles-loader-color-2;
39 |   }
40 | 
41 |   &:after {
42 |     @include animation(inner-circles-loader $inner-circles-loader-speed .2s reverse infinite);
43 |     @include transform-origin(100%, 50%);
44 |     right: 0;
45 |     background: $inner-circles-loader-color-3;
46 |   }
47 | }
48 | 
49 | @include keyframes(inner-circles-loader) {
50 |   0%   { @include transform(rotate(0deg)) }
51 |   50%  { @include transform(rotate(360deg)) }
52 |   100% { @include transform(rotate(0deg)) }
53 | }
54 | 


--------------------------------------------------------------------------------
/sass/spinner/plus.scss:
--------------------------------------------------------------------------------
  1 | @import "compass/css3";
  2 | 
  3 | $plus-loader-size: 48px !default;
  4 | $plus-loader-speed: 3s !default;
  5 | $plus-loader-colors: #f86 #fc6 #6d7 #4ae !default;
  6 | 
  7 | $plus-loader-color-1: nth($plus-loader-colors, 1) !default;
  8 | $plus-loader-color-2: nth($plus-loader-colors, 2) !default;
  9 | $plus-loader-color-3: nth($plus-loader-colors, 3) !default;
 10 | $plus-loader-color-4: nth($plus-loader-colors, 4) !default;
 11 | 
 12 | @include keyframes(plus-loader-top) {
 13 |   2.5% {
 14 |     background: $plus-loader-color-1;
 15 |     @include transform(rotateY(0deg));
 16 |     @include animation-timing-function(ease-in);
 17 |   }
 18 |   13.75% {
 19 |     background: scale-color($plus-loader-color-1, $lightness: -25%);
 20 |     @include transform(rotateY(90deg));
 21 |     @include animation-timing-function(step-start);
 22 |   }
 23 |   13.76% {
 24 |     background: scale-color($plus-loader-color-2, $lightness: -25%);
 25 |     @include transform(rotateY(90deg));
 26 |     @include animation-timing-function(ease-out);
 27 |   }
 28 |   25% {
 29 |     background: $plus-loader-color-2;
 30 |     @include transform(rotateY(180deg));
 31 |   }
 32 |   27.5% {
 33 |     background: $plus-loader-color-2;
 34 |     @include transform(rotateY(180deg));
 35 |     @include animation-timing-function(ease-in);
 36 |   }
 37 |   41.25% {
 38 |     background: scale-color($plus-loader-color-2, $lightness: -25%);
 39 |     @include transform(rotateY(90deg));
 40 |     @include animation-timing-function(step-start);
 41 |   }
 42 |   41.26% {
 43 |     background: scale-color($plus-loader-color-3, $lightness: -25%);
 44 |     @include transform(rotateY(90deg));
 45 |     @include animation-timing-function(ease-out);
 46 |   }
 47 |   50% {
 48 |     background: $plus-loader-color-3;
 49 |     @include transform(rotateY(0deg));
 50 |   }
 51 |   
 52 |   52.5% {
 53 |     background: $plus-loader-color-3;
 54 |     @include transform(rotateY(0deg));
 55 |     @include animation-timing-function(ease-in);
 56 |   }
 57 |   63.75% {
 58 |     background: scale-color($plus-loader-color-3, $lightness: -25%);
 59 |     @include transform(rotateY(90deg));
 60 |     @include animation-timing-function(step-start);
 61 |   }
 62 |   63.76% {
 63 |     background: scale-color($plus-loader-color-4, $lightness: -25%);
 64 |     @include transform(rotateY(90deg));
 65 |     @include animation-timing-function(ease-out);
 66 |   }
 67 |   75% {
 68 |     background: $plus-loader-color-4;
 69 |     @include transform(rotateY(180deg));
 70 |   }
 71 |   77.5% {
 72 |     background: $plus-loader-color-4;
 73 |     @include transform(rotateY(180deg));
 74 |     @include animation-timing-function(ease-in);
 75 |   }
 76 |   91.25% {
 77 |     background: scale-color($plus-loader-color-4, $lightness: -25%);
 78 |     @include transform(rotateY(90deg));
 79 |     @include animation-timing-function(step-start);
 80 |   }
 81 |   91.26% {
 82 |     background: scale-color($plus-loader-color-1, $lightness: -25%);
 83 |     @include transform(rotateY(90deg));
 84 |     @include animation-timing-function(ease-in);
 85 |   }
 86 |   100% {
 87 |     background: $plus-loader-color-1;
 88 |     @include transform(rotateY(0deg));
 89 |     @include animation-timing-function(step-start);
 90 |   }
 91 | }
 92 | 
 93 | @include keyframes(plus-loader-bottom) {
 94 |   0% {
 95 |     background: $plus-loader-color-2;
 96 |     @include animation-timing-function(step-start);
 97 |   }
 98 |   50% {
 99 |     background: $plus-loader-color-2;
100 |     @include animation-timing-function(step-start);
101 |   }
102 |   75% {
103 |     background: $plus-loader-color-4;
104 |     @include animation-timing-function(step-start);
105 |   }
106 |   100% {
107 |     background: $plus-loader-color-4;
108 |     @include animation-timing-function(step-start);
109 |   }
110 | }
111 | 
112 | @include keyframes(plus-loader-background) {
113 |   0% {
114 |     background: $plus-loader-color-1;
115 |     @include transform(rotateZ(180deg));
116 |   }
117 |   25% {
118 |     background: $plus-loader-color-1;
119 |     @include transform(rotateZ(180deg));
120 |     @include animation-timing-function(step-start);
121 |   }
122 |   27.5% {
123 |     background: $plus-loader-color-3;
124 |     @include transform(rotateZ(90deg));
125 |   }
126 |   50% {
127 |     background: $plus-loader-color-3;
128 |     @include transform(rotateZ(90deg));
129 |     @include animation-timing-function(step-start);
130 |   }
131 |   52.5% {
132 |     background: $plus-loader-color-3;
133 |     @include transform(rotateZ(0deg));
134 |   }
135 |   
136 |   75% {
137 |     background: $plus-loader-color-3;
138 |     @include transform(rotateZ(0deg));
139 |     @include animation-timing-function(step-start);
140 |   }
141 |   77.5% {
142 |     background: $plus-loader-color-1;
143 |     @include transform(rotateZ(270deg));
144 |   }
145 |   100% {
146 |     background: $plus-loader-color-1;
147 |     @include transform(rotateZ(270deg));
148 |     @include animation-timing-function(step-start);
149 |   }
150 | }
151 | 
152 | /* :not(:required) hides this rule from IE9 and below */
153 | .plus-loader:not(:required) {
154 |   overflow: hidden;
155 |   position: relative;
156 |   text-indent: -9999px;
157 | 
158 |   display: inline-block;
159 |   width: $plus-loader-size;
160 |   height: $plus-loader-size;
161 |   
162 |   background: $plus-loader-color-1;
163 |   @include border-radius($plus-loader-size / 2);
164 |   
165 |   &::after {
166 |     background: $plus-loader-color-1;
167 |     @include border-radius(($plus-loader-size / 2) 0 0 ($plus-loader-size / 2));
168 |     content: '';
169 |     position: absolute;
170 |     right: 50%;
171 |     top: 0;
172 |     width: 50%;
173 |     height: 100%;
174 |     @include transform-origin(100%, 50%);
175 |     @include animation(plus-loader-top $plus-loader-speed infinite linear);
176 |   }
177 |   
178 |   &::before {
179 |     background: $plus-loader-color-2;
180 |     @include border-radius(($plus-loader-size / 2) 0 0 ($plus-loader-size / 2));
181 |     content: '';
182 |     position: absolute;
183 |     right: 50%;
184 |     top: 0;
185 |     width: 50%;
186 |     height: 100%;
187 |     @include transform-origin(100%, 50%);
188 |     @include animation(plus-loader-bottom $plus-loader-speed infinite linear);
189 |   }
190 | 
191 |   @include transform(rotateZ(90deg));
192 |   @include transform-origin(50%, 50%);
193 |   @include animation(plus-loader-background $plus-loader-speed infinite ease-in-out);
194 | }
195 | 


--------------------------------------------------------------------------------
/sass/spinner/pong.scss:
--------------------------------------------------------------------------------
  1 | @import "compass/css3";
  2 | 
  3 | $pong-loader-size: 80px !default;
  4 | $pong-loader-speed: 1500ms !default;
  5 | $pong-loader-color-1: #8cdb8b !default;
  6 | $pong-loader-color-2: #353c39 !default;
  7 | 
  8 | $pong-loader-unit: $pong-loader-size / 8;
  9 | $pong-loader-unit-double: 2 * $pong-loader-unit;
 10 | $pong-loader-unit-neg: 0 - $pong-loader-unit;
 11 | 
 12 | @include keyframes(pong-loader) {
 13 |   0%   {
 14 |     left: 0.5 * $pong-loader-unit;
 15 |     top: 0;
 16 |   }
 17 |   25%   {
 18 |     left: 6.5 * $pong-loader-unit;
 19 |     top: 2 * $pong-loader-unit;
 20 |   }
 21 |   50%   {
 22 |     left: 0.5 * $pong-loader-unit;
 23 |   }
 24 |   62.5% {
 25 |     top: 5 * $pong-loader-unit;
 26 |   }
 27 |   75%   {
 28 |     left: 6.5 * $pong-loader-unit;
 29 |     top: 70%;
 30 |   }
 31 |   100%   {
 32 |     left: 0.5 * $pong-loader-unit;
 33 |     top: 0%;
 34 |   }
 35 | }
 36 | 
 37 | @include keyframes(pong-loader-paddle-1) {
 38 |   0%   {
 39 |     @include box-shadow(
 40 |       inset $pong-loader-color-2 0 (0.5 * $pong-loader-unit) 0 0,
 41 |       inset $pong-loader-color-2 0 (3.5 * $pong-loader-unit-neg) 0 0,
 42 |       inset $pong-loader-color-2 (0.3 * $pong-loader-unit-neg) 0 0 0,
 43 |       inset $pong-loader-color-1 $pong-loader-unit-neg 0 0 0
 44 |     );
 45 |   }
 46 |   25%   {
 47 |     @include box-shadow(
 48 |       inset $pong-loader-color-2 0 (1.5 * $pong-loader-unit) 0 0,
 49 |       inset $pong-loader-color-2 0 (2.5 * $pong-loader-unit-neg) 0 0,
 50 |       inset $pong-loader-color-2 (0.3 * $pong-loader-unit-neg) 0 0 0,
 51 |       inset $pong-loader-color-1 $pong-loader-unit-neg 0 0 0
 52 |     );
 53 |   }
 54 |   50%   {
 55 |     @include box-shadow(
 56 |       inset $pong-loader-color-2 0 0 0 0,
 57 |       inset $pong-loader-color-2 0 (4 * $pong-loader-unit-neg) 0 0,
 58 |       inset $pong-loader-color-2 (0.3 * $pong-loader-unit-neg) 0 0 0,
 59 |       inset $pong-loader-color-1 $pong-loader-unit-neg 0 0 0
 60 |     );
 61 |   }
 62 |   62.5% {
 63 |     @include box-shadow(
 64 |       inset $pong-loader-color-2 0 $pong-loader-unit 0 0,
 65 |       inset $pong-loader-color-2 0 (3 * $pong-loader-unit-neg) 0 0,
 66 |       inset $pong-loader-color-2 (0.3 * $pong-loader-unit-neg) 0 0 0,
 67 |       inset $pong-loader-color-1 $pong-loader-unit-neg 0 0 0
 68 |     );
 69 |   }
 70 |   75%   {
 71 |     @include box-shadow(
 72 |       inset $pong-loader-color-2 0 (4 * $pong-loader-unit) 0 0,
 73 |       inset $pong-loader-color-2 0 0 0 0,
 74 |       inset $pong-loader-color-2 (0.3 * $pong-loader-unit-neg) 0 0 0,
 75 |       inset $pong-loader-color-1 $pong-loader-unit-neg 0 0 0
 76 |     );
 77 |   }
 78 |   100%   {
 79 |     @include box-shadow(
 80 |       inset $pong-loader-color-2 0 (0.5 * $pong-loader-unit) 0 0,
 81 |       inset $pong-loader-color-2 0 (3.5 * $pong-loader-unit-neg) 0 0,
 82 |       inset $pong-loader-color-2 (0.3 * $pong-loader-unit-neg) 0 0 0,
 83 |       inset $pong-loader-color-1 $pong-loader-unit-neg 0 0 0
 84 |     );
 85 |   }
 86 | }
 87 | 
 88 | @include keyframes(pong-loader-paddle-2) {
 89 |   0%   {
 90 |     @include box-shadow(
 91 |       inset $pong-loader-color-2 0 0 0 0,
 92 |       inset $pong-loader-color-2 0 (4 * $pong-loader-unit-neg) 0 0,
 93 |       inset $pong-loader-color-2 (0.3 * $pong-loader-unit) 0 0 0,
 94 |       inset $pong-loader-color-1 $pong-loader-unit-neg 0 0 0
 95 |     );
 96 |   }
 97 |   50%   {
 98 |     @include box-shadow(
 99 |       inset $pong-loader-color-2 0 (3 * $pong-loader-unit) 0 0,
100 |       inset $pong-loader-color-2 0 $pong-loader-unit-neg 0 0,
101 |       inset $pong-loader-color-2 (0.3 * $pong-loader-unit) 0 0 0,
102 |       inset $pong-loader-color-1 $pong-loader-unit-neg 0 0 0
103 |     );
104 |   }
105 |   62.5% {
106 |     @include box-shadow(
107 |       inset $pong-loader-color-2 0 (4 * $pong-loader-unit) 0 0,
108 |       inset $pong-loader-color-2 0 0 0 0,
109 |       inset $pong-loader-color-2 (0.3 * $pong-loader-unit) 0 0 0,
110 |       inset $pong-loader-color-1 $pong-loader-unit-neg 0 0 0
111 |     );
112 |   }
113 |   75%   {
114 |     @include box-shadow(
115 |       inset $pong-loader-color-2 0 (2 * $pong-loader-unit) 0 0,
116 |       inset $pong-loader-color-2 0 (2 * $pong-loader-unit-neg) 0 0,
117 |       inset $pong-loader-color-2 (0.3 * $pong-loader-unit) 0 0 0,
118 |       inset $pong-loader-color-1 $pong-loader-unit-neg 0 0 0
119 |     );
120 |   }
121 |   100%   {
122 |     @include box-shadow(
123 |       inset $pong-loader-color-2 0 0 0 0,
124 |       inset $pong-loader-color-2 0 (4 * $pong-loader-unit-neg) 0 0,
125 |       inset $pong-loader-color-2 (0.3 * $pong-loader-unit) 0 0 0,
126 |       inset $pong-loader-color-1 $pong-loader-unit-neg 0 0 0
127 |     );
128 |   }
129 | }
130 | 
131 | /* :not(:required) hides this rule from IE9 and below */
132 | .pong-loader:not(:required) {
133 |   width: 8 * $pong-loader-unit;
134 |   height: 6 * $pong-loader-unit;
135 |   background: $pong-loader-color-2;
136 |   position: relative;
137 |   display:inline-block;
138 |   overflow: hidden;
139 |   text-indent: 100%;
140 |   @include box-shadow(
141 |     inset $pong-loader-color-2 0 0 0 0,
142 |     inset $pong-loader-color-2 0 (4 * $pong-loader-unit-neg) 0 0,
143 |     inset $pong-loader-color-2 (0.3 * $pong-loader-unit-neg) 0 0 0,
144 |     inset $pong-loader-color-1 $pong-loader-unit-neg 0 0 0
145 |   );
146 |   @include animation(pong-loader-paddle-1 $pong-loader-speed infinite linear);
147 | 
148 |   &:before{
149 |     @include animation(pong-loader-paddle-2 $pong-loader-speed infinite linear);
150 |     position: absolute;
151 |     top: 0;
152 |     left: 0;
153 |     display: block;
154 |     content: "";
155 |     width: $pong-loader-unit;
156 |     height: 100%;
157 |     @include box-shadow(
158 |       inset $pong-loader-color-2 0 0 0 0,
159 |       inset $pong-loader-color-2 0 (4 * $pong-loader-unit-neg) 0 0,
160 |       inset $pong-loader-color-2 (0.3 * $pong-loader-unit-neg) 0 0 0,
161 |       inset $pong-loader-color-1 $pong-loader-unit-neg 0 0 0
162 |     );
163 |   }
164 | 
165 |   &:after{
166 |     content: "";
167 |     display:block;
168 |     @include animation(pong-loader $pong-loader-speed infinite linear);
169 |     @include border-radius(50%);
170 |     position: absolute;
171 |     left: 0;
172 |     top: 0;
173 |     width: $pong-loader-unit;
174 |     height: $pong-loader-unit;
175 |     background: $pong-loader-color-1;
176 |   }
177 | }
178 | 


--------------------------------------------------------------------------------
/sass/spinner/pulse.scss:
--------------------------------------------------------------------------------
 1 | @import "compass/css3";
 2 | 
 3 | $pulse-loader-size: 50px !default;
 4 | $pulse-loader-color: #e67e22 !default;
 5 | 
 6 | .pulse-loader:not(:required) {
 7 |   display: inline-block;
 8 |   width: $pulse-loader-size;
 9 |   height: $pulse-loader-size;
10 | 
11 |   @include animation(pulse-loader .7s linear infinite alternate );
12 |   border: 2px solid $pulse-loader-color;
13 |   @include border-radius(50%);
14 |   overflow: hidden;
15 |   text-indent: $pulse-loader-size;
16 | }
17 | 
18 | @include keyframes(pulse-loader) {
19 |   0% { @include box-shadow($pulse-loader-color 0 0 0px ($pulse-loader-size / 5 * 2)); }
20 |   40% { @include box-shadow(none); }
21 |   100% { @include box-shadow($pulse-loader-color 0 0 0px ($pulse-loader-size / 2) inset); }
22 | }
23 | 


--------------------------------------------------------------------------------
/sass/spinner/refreshing.scss:
--------------------------------------------------------------------------------
 1 | @import "compass/css3";
 2 | 
 3 | $refreshing-loader-color: #9ac !default;
 4 | 
 5 | @include keyframes(refreshing-loader) {
 6 |   0%   { @include rotateZ(0deg); }
 7 |   100% { @include rotateZ(360deg); }
 8 | }
 9 | 
10 | /* :not(:required) hides this rule from IE9 and below */
11 | .refreshing-loader:not(:required) {
12 |   @include animation(refreshing-loader 1000ms infinite linear);
13 |   @include border-radius(2.4em);
14 |   border: 0.4em solid $refreshing-loader-color;
15 |   border-left-color: transparent;
16 |   color: transparent;
17 |   display: inline-block;
18 |   font-size: 10px;
19 |   line-height: 1.2;
20 |   width: 3em;
21 |   height: 3em;
22 |   text-indent: 100%;
23 |   
24 |   &:after {
25 |     display: block;
26 |     border: 0.5em solid transparent;
27 |     border-top-color: $refreshing-loader-color;
28 |     border-left-color: $refreshing-loader-color;
29 |     content: '';
30 |     width: 0;
31 |     height: 0;
32 |     overflow: hidden;
33 |     margin-left: -0.2em;
34 |     margin-top: 1em;
35 |   }
36 | }
37 | 


--------------------------------------------------------------------------------
/sass/spinner/spinner.scss:
--------------------------------------------------------------------------------
 1 | @import "compass/css3";
 2 | 
 3 | $spinner-loader-color: rgba(#003, 0.3) !default;
 4 | 
 5 | @include keyframes(spinner-loader) {
 6 |   0%   { @include rotateZ(0deg); }
 7 |   100% { @include rotateZ(360deg); }
 8 | }
 9 | 
10 | /* :not(:required) hides this rule from IE9 and below */
11 | .spinner-loader:not(:required) {
12 |   @include animation(spinner-loader 1500ms infinite linear);
13 |   @include border-radius(0.5em);
14 |   @include box-shadow(
15 |     $spinner-loader-color 1.5em 0 0 0,
16 |     $spinner-loader-color 1.1em 1.1em 0 0,
17 |     $spinner-loader-color 0 1.5em 0 0,
18 |     $spinner-loader-color -1.1em 1.1em 0 0,
19 |     $spinner-loader-color -1.5em 0 0 0,
20 |     $spinner-loader-color -1.1em -1.1em 0 0,
21 |     $spinner-loader-color 0 -1.5em 0 0,
22 |     $spinner-loader-color 1.1em -1.1em 0 0
23 |   );
24 |   display: inline-block;
25 |   font-size: 10px;
26 |   width: 1em;
27 |   height: 1em;
28 |   margin: 1.5em;
29 |   overflow: hidden;
30 |   text-indent: 100%;
31 | }
32 | 


--------------------------------------------------------------------------------
/sass/spinner/spinning-pixels.scss:
--------------------------------------------------------------------------------
 1 | @import "compass/css3";
 2 | 
 3 | $spinning-pixels-size: 10px !default;
 4 | $spinning-pixels-color: #f35626 !default;
 5 | $spinning-pixels-duration: 2s !default;
 6 | 
 7 | /* :not(:required) hides this rule from IE9 and below */
 8 | .spinning-pixels-loader:not(:required) {
 9 |   @include animation(spinning-pixels $spinning-pixels-duration linear infinite);
10 |   width: $spinning-pixels-size;
11 |   height: $spinning-pixels-size;
12 |   font-size: 0;
13 |   display: inline-block;
14 |   background: $spinning-pixels-color;
15 |   @include box-shadow(
16 |     15px 15px  0 0 $spinning-pixels-color,
17 |     -15px -15px  0 0 $spinning-pixels-color,
18 |     15px -15px  0 0 $spinning-pixels-color,
19 |     -15px 15px  0 0 $spinning-pixels-color,
20 |     0 15px  0 0 $spinning-pixels-color,
21 |     15px 0  0 0 $spinning-pixels-color,
22 |     -15px 0  0 0 $spinning-pixels-color,
23 |     0 -15px 0 0 $spinning-pixels-color
24 |   );
25 | }
26 | 
27 | @include keyframes(spinning-pixels) {
28 |   0%  {
29 |     -webkit-filter: hue-rotate(0deg);
30 |     filter: hue-rotate(0deg);
31 |   }
32 |   50% {
33 |     @include box-shadow(
34 |       20px 20px  0 0 $spinning-pixels-color,
35 |       -20px -20px  0 0 $spinning-pixels-color,
36 |       20px -20px  0 0 $spinning-pixels-color,
37 |       -20px 20px  0 0 $spinning-pixels-color,
38 |       0 10px  0 0 $spinning-pixels-color,
39 |       10px 0  0 0 $spinning-pixels-color,
40 |       -10px 0  0 0 $spinning-pixels-color,
41 |       0 -10px 0 0 $spinning-pixels-color
42 |     );
43 |   }
44 | 
45 |   75% {
46 |     @include box-shadow(
47 |       20px 20px  0 0 $spinning-pixels-color,
48 |       -20px -20px  0 0 $spinning-pixels-color,
49 |       20px -20px  0 0 $spinning-pixels-color,
50 |       -20px 20px  0 0 $spinning-pixels-color,
51 |       0 10px  0 0 $spinning-pixels-color,
52 |       10px 0  0 0 $spinning-pixels-color,
53 |       -10px 0  0 0 $spinning-pixels-color,
54 |       0 -10px 0 0 $spinning-pixels-color
55 |     );
56 |   }
57 | 
58 |   100% {
59 |     @include transform(rotate(360deg));
60 |     -webkit-filter: hue-rotate(360deg);
61 |     filter: hue-rotate(360deg);
62 |   }
63 | }
64 | 


--------------------------------------------------------------------------------
/sass/spinner/three-quarters.scss:
--------------------------------------------------------------------------------
 1 | @import "compass/css3";
 2 | 
 3 | $three-quarters-loader-size: 32px !default;
 4 | $three-quarters-loader-color: #38e !default;
 5 | 
 6 | @include keyframes(three-quarters-loader) {
 7 |   0%   { @include rotateZ(0deg); }
 8 |   100% { @include rotateZ(360deg); }
 9 | }
10 | 
11 | /* :not(:required) hides this rule from IE9 and below */
12 | .three-quarters-loader:not(:required) {
13 |   @include animation(three-quarters-loader 1250ms infinite linear);
14 |   border: ($three-quarters-loader-size/4) solid $three-quarters-loader-color;
15 |   border-right-color: transparent;
16 |   border-radius: ($three-quarters-loader-size / 2);
17 |   box-sizing: border-box;
18 |   display: inline-block;
19 |   position: relative;
20 |   overflow: hidden;
21 |   text-indent: -9999px;
22 |   width: $three-quarters-loader-size;
23 |   height: $three-quarters-loader-size;
24 | }
25 | 


--------------------------------------------------------------------------------
/sass/spinner/throbber.scss:
--------------------------------------------------------------------------------
 1 | @import "compass/css3";
 2 | 
 3 | $throbber-loader-color: #dde2e7 !default;
 4 | $throbber-loader-highlight-color: #6b9dc8 !default;
 5 | $throbber-loader-height: 1.5em !default;
 6 | $throbber-loader-segment-width: 0.9em !default;
 7 | $throbber-loader-spacing: 0.7em !default;
 8 | 
 9 | @include keyframes(throbber-loader) {
10 |   0%  { background: $throbber-loader-color }
11 |   10% { background: $throbber-loader-highlight-color }
12 |   40% { background: $throbber-loader-color }
13 | }
14 | 
15 | /* :not(:required) hides these rules from IE9 and below */
16 | .throbber-loader:not(:required) {
17 |   @include animation(throbber-loader 2000ms 300ms infinite ease-out);
18 |   background: $throbber-loader-color;
19 |   display: inline-block;
20 |   position: relative;
21 |   text-indent: -9999px;
22 |   width: $throbber-loader-segment-width;
23 |   height: $throbber-loader-height;
24 |   margin: 0 ($throbber-loader-segment-width + $throbber-loader-spacing);
25 |   
26 |   &:before, &:after {
27 |     background: $throbber-loader-color;
28 |     content: '\x200B';
29 |     display: inline-block;
30 |     width: $throbber-loader-segment-width;
31 |     height: $throbber-loader-height;
32 |     position: absolute;
33 |     top: 0;
34 |   }
35 |   
36 |   &:before {
37 |     @include animation(throbber-loader 2000ms 150ms infinite ease-out);
38 |     left: -($throbber-loader-segment-width + $throbber-loader-spacing);
39 |   }
40 |   
41 |   &:after {
42 |     @include animation(throbber-loader 2000ms 450ms infinite ease-out);
43 |     right: -($throbber-loader-segment-width + $throbber-loader-spacing);
44 |   }
45 | }
46 | 


--------------------------------------------------------------------------------
/sass/spinner/timer.scss:
--------------------------------------------------------------------------------
 1 | @import "compass/css3";
 2 | 
 3 | $timer-size: 48px !default;
 4 | $timer-speed: 1250ms !default;
 5 | $timer-color: #c8d !default;
 6 | $timer-border-width: $timer-size / 8 !default;
 7 | 
 8 | @include keyframes(timer-loader) {
 9 |   0%   { @include rotateZ(0deg); }
10 |   100% { @include rotateZ(360deg); }
11 | }
12 | 
13 | /* :not(:required) hides this rule from IE9 and below */
14 | .timer-loader:not(:required) {
15 |   border: $timer-border-width solid $timer-color;
16 |   @include border-radius($timer-size / 2);
17 |   @include box-sizing(border-box);
18 |   display: inline-block;
19 |   overflow: hidden;
20 |   position: relative;
21 |   text-indent: -9999px;
22 |   width: $timer-size;
23 |   height: $timer-size;
24 |   
25 |   &::before {
26 |     @include animation(timer-loader $timer-speed infinite linear);
27 |     @include transform-origin($timer-size / 16, $timer-size / 16);
28 |     background: $timer-color;
29 |     @include border-radius($timer-size / 16);
30 |     content: '';
31 |     display: block;
32 |     position: absolute;
33 |     width: ($timer-size / 8);
34 |     height: (2 * $timer-size / 5);
35 |     left: ($timer-size / 2) - ($timer-size / 16) - $timer-border-width;
36 |     top: ($timer-size / 2) - ($timer-size / 16) - $timer-border-width;
37 |   }
38 |   
39 |   &::after {
40 |     @include animation(timer-loader (12 * $timer-speed) infinite linear);
41 |     @include transform-origin($timer-size / 16, $timer-size / 16);
42 |     background: $timer-color;
43 |     @include border-radius($timer-size / 16);
44 |     content: '';
45 |     display: block;
46 |     position: absolute;
47 |     width: ($timer-size / 8);
48 |     height: ($timer-size / 3);
49 |     left: ($timer-size / 2) - ($timer-size / 16) - $timer-border-width;
50 |     top: ($timer-size / 2) - ($timer-size / 16) - $timer-border-width;
51 |   }
52 | }
53 | 


--------------------------------------------------------------------------------
/sass/spinner/whirly.scss:
--------------------------------------------------------------------------------
 1 | @import "compass/css3";
 2 | 
 3 | $whirly-loader-size: 64px !default;
 4 | $whirly-loader-color: #e66 !default;
 5 | $whirly-loader-speed: 1.25s !default;
 6 | 
 7 | $whirly-loader-radius: $whirly-loader-size / 2 !default;
 8 | $whirly-loader-dot-size: $whirly-loader-size / 8 !default;
 9 | 
10 | @include keyframes(whirly-loader) {
11 |   0%   { @include rotateZ(0deg); }
12 |   100% { @include rotateZ(360deg); }
13 | }
14 | 
15 | /* :not(:required) hides this rule from IE9 and below */
16 | .whirly-loader:not(:required) {
17 |   overflow: hidden;
18 |   position: relative;
19 |   text-indent: -9999px;
20 |   
21 |   display: inline-block;
22 |   width: $whirly-loader-dot-size;
23 |   height: $whirly-loader-dot-size;
24 |   
25 |   background: transparent;
26 |   @include border-radius(100%);
27 |   
28 |   $shadows: comma-list();
29 |   $angle: 0deg;
30 |   
31 |   @while $angle < 360deg {
32 |     $size: (18px - ($angle / 10deg * 1px)) / 3;
33 |     $radius: $whirly-loader-radius - $size;
34 |     $x: $radius * sin($angle);
35 |     $y: $radius * cos($angle);
36 |     $shadows: append($shadows, $whirly-loader-color $x $y 0 $size);
37 |     $angle: $angle + 2deg;
38 |   }
39 |   
40 |   @include box-shadow($shadows);
41 |   
42 |   @include animation(whirly-loader $whirly-loader-speed infinite linear);
43 |   @include transform-origin(50%, 50%);
44 | }
45 | 


--------------------------------------------------------------------------------
/sass/spinner/wobblebar.scss:
--------------------------------------------------------------------------------
 1 | @import "compass/css3";
 2 | 
 3 | $wobblebar-loader-size: 128px !default;
 4 | $wobblebar-loader-speed: 15000ms !default;
 5 | $wobblebar-loader-color: #a9d !default;
 6 | 
 7 | @include keyframes(wobblebar-loader) {
 8 |   0%  { left: ($wobblebar-loader-size / 32); }
 9 |   3%  { left: (26 * $wobblebar-loader-size / 32); }
10 |   
11 |   6% { left: ($wobblebar-loader-size / 32); }
12 |   9% { left: (26 * $wobblebar-loader-size / 32); }
13 |   
14 |   12% { left: ($wobblebar-loader-size / 32); }
15 |   15% { left: (26 * $wobblebar-loader-size / 32); }
16 | 
17 |   18% { left: (8 * $wobblebar-loader-size / 32); }
18 |   
19 |   27% { left: (8 * $wobblebar-loader-size / 32); }
20 |   30% { left: (26 * $wobblebar-loader-size / 32); }
21 |   
22 |   
23 |   33%  { left: ($wobblebar-loader-size / 32); }
24 |   36%  { left: (26 * $wobblebar-loader-size / 32); }
25 |   
26 |   39% { left: ($wobblebar-loader-size / 32); }
27 |   42% { left: (26 * $wobblebar-loader-size / 32); }
28 |   
29 |   45% { left: ($wobblebar-loader-size / 32); }
30 |   48% { left: (26 * $wobblebar-loader-size / 32); }
31 | 
32 |   51% { left: (13 * $wobblebar-loader-size / 32); }
33 |   
34 |   63% { left: (13 * $wobblebar-loader-size / 32); }
35 |   
36 |   66%  { left: ($wobblebar-loader-size / 32); }
37 |   69%  { left: (26 * $wobblebar-loader-size / 32); }
38 |   
39 |   72% { left: ($wobblebar-loader-size / 32); }
40 |   75% { left: (26 * $wobblebar-loader-size / 32); }
41 |   
42 |   78% { left: ($wobblebar-loader-size / 32); }
43 |   81% { left: (26 * $wobblebar-loader-size / 32); }
44 | 
45 |   84% { left: (18 * $wobblebar-loader-size / 32); }
46 |   
47 |   94% { left: (18 * $wobblebar-loader-size / 32); }
48 |   97% { left: (26 * $wobblebar-loader-size / 32); }
49 | }
50 | 
51 | /* :not(:required) hides this rule from IE9 and below */
52 | .wobblebar-loader:not(:required) {
53 |   background: $wobblebar-loader-color;
54 |   @include border-radius($wobblebar-loader-size / 12);
55 |   display: inline-block;
56 |   overflow: hidden;
57 |   text-indent: -9999px;
58 |   width: $wobblebar-loader-size;
59 |   height: ($wobblebar-loader-size / 6);
60 |   position: relative;
61 |   
62 |   &::after {
63 |     @include animation(wobblebar-loader $wobblebar-loader-speed infinite ease);
64 |     background: white;
65 |     display: block;
66 |     @include border-radius(2 * $wobblebar-loader-size / 36);
67 |     content: '';
68 |     position: absolute;
69 |     top: ($wobblebar-loader-size / 36);
70 |     left: ($wobblebar-loader-size / 32);
71 |     width: ($wobblebar-loader-size / 6);
72 |     height: (4 * $wobblebar-loader-size / 36);
73 |   }
74 | }
75 | 


--------------------------------------------------------------------------------
/sass/spinners.scss:
--------------------------------------------------------------------------------
 1 | @import "spinner/spinner";
 2 | @import "spinner/refreshing";
 3 | @import "spinner/throbber";
 4 | @import "spinner/heartbeat";
 5 | @import "spinner/gauge";
 6 | @import "spinner/timer";
 7 | @import "spinner/three-quarters";
 8 | @import "spinner/wobblebar";
 9 | @import "spinner/atebits";
10 | @import "spinner/whirly";
11 | @import "spinner/flower";
12 | @import "spinner/dots";
13 | @import "spinner/circles";
14 | @import "spinner/plus";
15 | @import "spinner/ball";
16 | @import "spinner/hexdots";
17 | @import "spinner/inner-circles";
18 | @import "spinner/pong";
19 | @import "spinner/pulse";
20 | @import "spinner/spinning-pixels";
21 | @import "spinner/echo";
22 | 


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