Ouroboros is a Sass/CSS Spinner created by Tom Genoni. If you don’t use SASS, you can use the CSS that the Sass generates in stylesheets/main.scss and make edits to the parameters.
Demos
See the Pen Ouroboros Sass/CSS Spinner by Naeem Noor (@naeemnur) on CodePen
Browser Support
- Chrome 24+
- Firefox 18+
- IE 10+
- Opera 12+
- Safari 5+
- iOS 5 & 6 (scrolling pauses animation)
A standard 32×32 animated GIF throbber is provided as a fallback for older versions of IE.
How to use
For Sass users add the _ui-spinner.scss into your project.
For IE < 10 support, add the spinner-old-ie.scss and the throbber.gif and include it with a IE conditional tag.
In our project Sass use the ui-spinner mixin with defaults or pass in any arguments.
@include ui-spinner; // Will use defaults.
@include ui-spinner(#fff, 60px, gray, purple, .7, 4s); // Will use these variables.
Use with the following HTML.
Optional Parameters
| Parameter | Description | Defaults |
|---|---|---|
| Hole color* | Color of the hole to fake a ring | transparent |
| Size | Size of the spinner | 46px |
| Background color light | First color, specify a lighter of the two colors | #ddd |
| Background color dark | Second color, specify the darker of the two colors | #3c76ca |
| Opacity | The opacity of the spinner | .8 |
| Duration | Speed of the spinner | 3s |
Note: *The hole color is just to fake a ring spinner. You have to match the color you pass into the mixin.