Simple CSS spinners and throbbers made with CSS and minimal HTML markup.
All spinners are designed to be used with the following markup:
<div class="spinner-class-name">
Loading...
</div>
Simply replace "spinner-class-name" with the spinner of your choice.
To use a specific spinner 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">
Loading...
</div>
| Class | Description |
|---|---|
| .spinner | Spinning circles. |
| .throbber | Animated Facebook-like throbber. |
| .refreshing | Circular spinning arrow. Great for refreshing content. |
| .heartbeat | Animated beating heart. |
| .gauge | Animated speedometer-like gauge with rotating needle. |
| .three-quarters | Minimal three-quarters donut spinner. |
| .wobblebar | Animated wobbling progress bar. |
| .atebits | Staight out of Letterpress, an animated rotating Atebits logo. |
| .whirly | A comet-like rotating spinner. |
| .flower | An animated spinning flower. |
| .dots | Almost a rotating shell game. With dots! |
| .circles | Three rotating multi-colored circles. |
| .plus | Animated Google Plus-like loader. |
| .ball | A bouncing ball. |