CSS Spinners
Simple CSS loading indicators made with CSS and minimal HTML markup.
All loading indicators are designed to be used with minimal markup:
<div class="loading-indicator">
Loading...
</div>Simply replace "loading-indicator" with the class name of your choice.
Markup
To use a specific loading indicator link the appropriate file:
<link rel="stylesheet" href="css/spinner/throbber.css">Or, if you'd like to have access to the entire library of spinners you can link the root file:
<link rel="stylesheet" href="css/spinners.css">Then apply the appropriate class name for the spinner of your choice to the markup:
<div class="throbber-loader">
Loading...
</div>Class names
The full list of loading indicator class names are shown below. To see them in action, visit http://css-spinners.com/.
| Class | Description |
|---|---|
| .spinner-loader | Spinning circles. |
| .throbber-loader | Animated Facebook-like throbber. |
| .refreshing-loader | Circular spinning arrow. Great for refreshing content. |
| .heartbeat-loader | Animated beating heart. |
| .gauge-loader | Animated speedometer-like gauge with rotating needle. |
| .three-quarters-loader | Minimal three-quarters donut spinner. |
| .wobblebar-loader | Animated wobbling progress bar. |
| .atebits-loader | Staight out of Letterpress, an animated rotating Atebits logo. |
| .whirly-loader | A comet-like rotating spinner. |
| .flower-loader | An animated spinning flower. |
| .dots-loader | Almost a rotating shell game. With dots! |
| .circles-loader | Three rotating multi-colored circles. |
| .plus-loader | Animated Google Plus-like loader. |
| .ball-loader | A bouncing ball. |
| .hexdots-loader | Similar to the dots animation, but with six! |
| .inner-circles-loader | A filling circle with other circles |
| .pong-loader | Retro tennis-like game simulation from the 70s. |
| .pulse-loader | A pulsing circle. Shrinking and enlarging. |
| .spinning-pixels-loader | A spinning pixelated loader. |
Customize with Sass
Many of the spinners in this collection can be customized by tweaking variables included in the Sass source files.
Install with Bower
You can install CSS Spinners with the following command, like any other Bower project:
$ bower install css-spinners
CSS is available in the css/ directory and Sass in the sass/ directory.
Contributions
Contributions are welcome! See CONTRIBUTING.md for details.
License
CSS Spinners is freely available under the MIT License. See LICENSE file for details.
Adaptations
React components by Adam Wanninger