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

tomgenoni
409 Stars 16 Forks 21 Commits 3 Opened issues

Description

CSS spinner for modern browsers, built with Sass.

Services available

!
?

Need anything else?

Contributors list

No Data

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.

Usage

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

  1. In our project Sass use the
    ui-spinner
    mixin with defaults or pass in any arguments. Also see the mixin examples in
    example.scss
    .
@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
    index.html
    .
<span class="side side-right">
    <span class="fill"></span>
</span>

The 6 Optional Parameters

    <th>Description</th>

    <th>Defaults</th>
</tr>

<tr>
    <td>Hole color*</td>

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

    <td>transparent</td>
</tr>

<tr>
    <td>Size</td>

    <td>Size of the spinner</td>

    <td>46px</td>
</tr>

<tr>
    <td>Background color light</td>

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

    <td>#ddd</td>
</tr>

<tr>
    <td>Background color dark</td>

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

    <td>#3c76ca</td>
</tr>

<tr>
    <td>Opacity</td>

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

    <td>.8</td>
</tr>

<tr>
    <td>Duration</td>

    <td>Speed of the spinner</td>

    <td>3s</td>
</tr>
Parameter
  • 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

stylesheets/main.scss
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.