Awesome Spinners
A curated collection of dazzling web spinners.
Inspired by the awesome list thing.
Table of Contents
CSS Only
- Load Awesome by Daniel Cardoso (Demo) (Source)
- SpinKit by Tobias Ahlin (Demo) (Source)
- CSS Load.net (Demo + Source)
- Spinners (Demo + Source)
- Horizontal Bars (Demo + Source)
- Three Dimensional (Demo + Source)
- Animated Text (Demo + Source)
- Misc - some are really cool! (Demo + Source)
- CSS Only Loaders (Demo)
- [ArtWorx] xLoader by Anas Tawfeek (Demo) (Source)
- Halogen (React spinner library) by Yuan Yan (Demo) (Source)
- Loaders.css by Connor Atherton (Demo) (Source)
- CSS Spinners by Oskar Gustafsson (Demo) (Source)
- Less Loaders by JesGraPa (Demo + Source)
- CSS cubic loader by Lokesh Suthat (Demo + Source)
- Wavy Loading Animations by Kyle Brumm (Demo + Source)
- Equalizes the loader by Caohim (Demo + Source)
- Ouroboros Spinner by Tom Genoni (Demo) (Source)
- React Activity Indicators by Luke Vella (Demo) (Source)
Single-element CSS
- CSS Spinners by John Long (Source)
- css-spinners-react (React adaptation of CSS Spinners by John Long) by Adam Wanninger (Source)
- Loaders Kit by Viduthalai Mani (Demo)
- Single Element CSS Spinners by Luke Haas (Demo) (Source)
- CSS Loading Spinners by Harold Soto (Demo & Source)
- Simple Spinner by Vineeth.TR (Demo & Source)
- Circular CSS Spinners by zeesx (Demo & Source)
- Collection of animated loaders by Ana Tudor (Demo & Source)
- CSS Loading Spinners by Beau (Demo & Source)
- Motion Blur Loader by Alex Bergin (Demo & Source)
Zero-element CSS
- Zero Element Loading Animations by Mike Riethmuller (Demo + Source)
SVG
- SVG-Loaders by Sam Hambert (Demo) (Source)
- svg-loaders-react (React adaptation of SVG-Loaders) by Adam Wanninger (Source)
- Tumblr Style Cog Spinners by Pasquale Vitiello (Demo) (Source)
- SVG Loader Animation by Nikhil Krishnan (Demo + Source)
- Animated Spinners by Ionic (Demo + Source)
- SVG Preloaders by Alex (Demo + Source)
- Pulse Loading by GoApp (Demo + Source)
- SVG Loading Icons by Aurer (Demo + Source)
- Material Design Spinner (Demo + Source)
JS and CSS
Canvas
Build Your Own Spinner
- Loading.io (Demo)
- Spin Cycle - CSS-powered spinner from any inline SVG by Chris Hart (Demo + Source)
- Spin.js by Felix Gnass (Demo) (Source)
Other Collections
- 10+ Best Pure CSS Loading Spinners For Front-end Developers by 365 Web Resources (List)
- Reddit Community Challenge: Design a CSS Spinner (List)
Contribute
Contributions welcome! Read the contribution guidelines first.
License
This work is licensed under a Creative Commons Attribution 4.0 International License.