https://github.com/tomgenoni/ouroboros

CSS spinner for modern browsers, built with Sass.
https://github.com/tomgenoni/ouroboros

Last synced: 3 months ago
JSON representation

CSS spinner for modern browsers, built with Sass.

• Host: GitHub
• URL: https://github.com/tomgenoni/ouroboros
• Owner: tomgenoni
• Archived: true
• Created: 2013-01-27T03:47:55.000Z (almost 12 years ago)
• Default Branch: master
• Last Pushed: 2013-06-15T06:38:16.000Z (over 11 years ago)
• Last Synced: 2024-07-15T16:55:55.757Z (5 months ago)
• Language: Ruby
• Homepage: http://atomeye.com/projects/sass-css-spinner.html
• Size: 163 KB
• Stars: 399
• Watchers: 19
• Forks: 15
• Open Issues: 3
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Ouroboros Sass/CSS Spinner

See blog entry at [http://atomeye.com/projects/sass-css-spinner.html](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`.

```html

```

3. In our project Sass use the `ui-spinner` mixin with defaults or pass in any arguments. Also see the mixin examples in `example.scss`.

```scss

@include ui-spinner; // Will use defaults.

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

```

4. Use with the following HTML. Also see the HTML examples in `index.html`.

```html



	

		

	


	

		

	



```


### The 6 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

	

* 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.