Need help with ouroboros?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

407 Stars 15 Forks 21 Commits 3 Opened issues


CSS spinner for modern browsers, built with Sass.

Services available


Need anything else?

Contributors list

# 286,229
1 commit
# 107,849
1 commit

Ouroboros Sass/CSS Spinner

See blog entry at 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.