CSS spinner for modern browsers, built with Sass.
See blog entry at http://atomeye.com/projects/sass-css-spinner.html for more details.
The Ouroboros is an ancient symbol depicting a serpent or dragon eating its own tail. Inspired by application progress spinners this provides an imageless 'throbber' for modern browsers that eats itself (in a way). The name comes after the greek words ουρά (tail) + βόρος (eater / devourer).
A standard 32x32 animated gif throbber is provided as a fallback for older versions of IE. It is centered where the spinner animation would have been.
_ui-spinner.scssinto your project.
spinner-old-ie.scssand the throbber.gif. You can include it with an IE conditional tag. See the example in
ui-spinnermixin with defaults or pass in any arguments. Also see the mixin examples in
@include ui-spinner; // Will use defaults. @include ui-spinner(#fff, 60px, gray, purple, .7, 4s); // Will use these variables.
<span class="side side-right"> <span class="fill"></span> </span>
<th>Description</th> <th>Defaults</th> </tr> <tr> <td>Hole color*</td> <td>Color of the hole to fake a ring</td> <td>transparent</td> </tr> <tr> <td>Size</td> <td>Size of the spinner</td> <td>46px</td> </tr> <tr> <td>Background color light</td> <td>First color, specify a lighter of the two colors</td> <td>#ddd</td> </tr> <tr> <td>Background color dark</td> <td>Second color, specify the darker of the two colors</td> <td>#3c76ca</td> </tr> <tr> <td>Opacity</td> <td>The opacity of the spinner</td> <td>.8</td> </tr> <tr> <td>Duration</td> <td>Speed of the spinner</td> <td>3s</td> </tr>
You can use the CSS that the Sass generates in
stylesheets/main.scssand make edits to the parameters described above.