https://github.com/jlong/css-spinners
Simple CSS spinners and throbbers made with CSS and minimal HTML markup.
https://github.com/jlong/css-spinners
Last synced: 10 months ago
JSON representation
Simple CSS spinners and throbbers made with CSS and minimal HTML markup.
- Host: GitHub
- URL: https://github.com/jlong/css-spinners
- Owner: jlong
- License: mit
- Created: 2013-05-10T00:01:39.000Z (almost 13 years ago)
- Default Branch: master
- Last Pushed: 2019-12-30T17:24:35.000Z (about 6 years ago)
- Last Synced: 2025-05-10T10:09:57.842Z (10 months ago)
- Language: CSS
- Homepage: http://www.css-spinners.com
- Size: 171 KB
- Stars: 924
- Watchers: 29
- Forks: 156
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
- awesome-spinners - Source
- awesome-frontend - css-spinners - Simple CSS spinners and throbbers made with CSS and minimal HTML markup. (CSS / CSS Animation)
README
CSS Spinners
===========
Simple CSS loading indicators made with CSS and minimal HTML markup.
All loading indicators are designed to be used with minimal markup:
```html
Loading...
```
Simply replace "loading-indicator" with the class name of your choice.
Markup
------
To use a specific loading indicator link the appropriate file:
```html
```
Or, if you'd like to have access to the entire library of spinners you can link the root file:
```html
```
Then apply the appropriate [class name](#class-names) for the spinner of your choice to the markup:
```html
Loading...
```
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. | | .echo-loader | A Growing circle that fade-in-out. |
Customize with Sass
-------------------
Many of the spinners in this collection can be customized by tweaking variables included in the Sass [source files](sass/spinner).
Install with Bower
------------------
You can install CSS Spinners with the following command, like any other [Bower](http://bower.io/) 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](CONTRIBUTING.md) for details.
License
-------
CSS Spinners is freely available under the MIT License. See [LICENSE](LICENSE) file for details.
Adaptations
-----------
[React components](https://github.com/ajwann/css-spinners-react) by Adam Wanninger