CSS Spinner Built With Sass

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.


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.

Project Page: https://github.com/tomgenoni/ouroboros
More info: http://atomeye.com/sass-css-spinner.html

Leave a Reply

Your email address will not be published. Required fields are marked *