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.

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.

<!--[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.

@include ui-spinner; // Will use defaults.
@include ui-spinner(#fff, 60px, gray, purple, .7, 4s); // Will use these variables.

Use with the following 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>

Optional Parameters

ParameterDescriptionDefaults
Hole color*Color of the hole to fake a ringtransparent
SizeSize of the spinner46px
Background color lightFirst color, specify a lighter of the two colors#ddd
Background color darkSecond color, specify the darker of the two colors#3c76ca
OpacityThe opacity of the spinner.8
DurationSpeed of the spinner3s

Note: *The hole color is just to fake a ring spinner. You have to match the color you pass into the mixin.