Ouroboros Sass/CSS Spinner
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).
Browser Support
- Chrome 24+
- Firefox 18+
- IE 10+
- Opera 12+
- Safari 5+
- iOS 5 & 6 (scrolling pauses animation)
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.
Usage
- For Sass users add the
_ui-spinner.scss
into your project. - If you want IE < 10 support also add the
spinner-old-ie.scss
and the throbber.gif. You can include it with an IE conditional tag. See the example inindex.html
.
<!--[if IE]>
<link media="screen" type="text/css" href="stylesheets/spinner-old-ie.css" rel="stylesheet" />
<![endif]-->
- In our project Sass use the
ui-spinner
mixin with defaults or pass in any arguments. Also see the mixin examples inexample.scss
.
@include ui-spinner; // Will use defaults.
@include ui-spinner(#fff, 60px, gray, purple, .7, 4s); // Will use these variables.
- Use with the following HTML. Also see the HTML examples in
index.html
.
<div class="ui-spinner">
<span class="side side-left">
<span class="fill"></span>
</span>
<span class="side side-right">
<span class="fill"></span>
</span>
</div>
The 6 Optional Parameters
<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>
Parameter |
---|
- The hole color is just to fake a ring spinner. You have to match the color you pass into the mixin to the background-color that the spinner will appear against.
Don't Use Sass?
You can use the CSS that the Sass generates in stylesheets/main.scss
and make edits to the parameters described above.