by tomgenoni

tomgenoni /ouroboros

CSS spinner for modern browsers, built with Sass.

410 Stars 16 Forks Last release: Not found 21 Commits 0 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:

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.


  1. For Sass users add the
    into your project.
  2. If you want IE < 10 support also add the
    and the throbber.gif. You can include it with an IE conditional tag. See the example in

  1. In our project Sass use the
    mixin 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.
  1. Use with the following HTML. Also see the HTML examples in
<span class="side side-right">
    <span class="fill"></span>

The 6 Optional Parameters



    <td>Hole color*</td>

    <td>Color of the hole to fake a ring</td>



    <td>Size of the spinner</td>


    <td>Background color light</td>

    <td>First color, specify a lighter of the two colors</td>


    <td>Background color dark</td>

    <td>Second color, specify the darker of the two colors</td>



    <td>The opacity of the spinner</td>



    <td>Speed of the spinner</td>

  • 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

and make edits to the parameters described above.

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.