charlieyqin / awesome-spinners

A curated collection of dazzling web spinners

Awesome Spinners

A curated collection of dazzling web spinners.

Inspired by the awesome list thing.

Table of Contents

• CSS Only
• Single-element CSS
• Zero-element CSS
• SVG
• JS and CSS
• Canvas
• Build Your Own Spinner

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)

Single-element CSS

• CSS Spinners by John Long (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)
• 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

• Loaders and Spinners by Tim Holman (Demo)
• Colorful Square Spinner by Tim Holman (Demo)

Canvas

• Canvas Sparkly Circle Loader by Jack Rugile (Demo)
• Sonic.js by James Padolsey (Demo) (Source)

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.