KO | EN

GitLite

Minimalist Open Source Repository Search Engine

gitlite — search

#dsh #dsh-plugin #developer-tools #ai-agent #claude-code #codex #typescript #ai-agents #deepseek-harness #mcp #cli #rust

awesome-spinners

★ 1,415 Open GitHub ↗

💫 A curated collection of dazzling web spinners

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# Awesome Spinners [![Awesome](https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg)](https://github.com/sindresorhus/awesome) [![Build Status](https://api.travis-ci.org/yangshun/awesome-spinners.svg)](https://travis-ci.org/yangshun/awesome-spinners)

> A curated collection of dazzling web spinners.

*Inspired by the [awesome](https://github.com/sindresorhus/awesome) list thing.*

## Table of Contents

- [CSS Only](#css-only)
- [Single-element CSS](#single-element-css)
- [Zero-element CSS](#zero-element-css)
- [SVG](#svg)
- [JS and CSS](#js-and-css)
- [Canvas](#canvas)
- [Build Your Own Spinner](#build-your-own-spinner)

## CSS Only

- Load Awesome by Daniel Cardoso ([Demo](http://github.danielcardoso.net/load-awesome/animations.html)) ([Source](https://github.com/danielcardoso/load-awesome))
- SpinKit by Tobias Ahlin ([Demo](http://tobiasahlin.com/spinkit/)) ([Source](https://github.com/tobiasahlin/SpinKit))
- CSS Load.net ([Demo + Source](http://cssload.net/))
  - Spinners ([Demo + Source](http://cssload.net/en/spinners))
  - Horizontal Bars ([Demo + Source](http://cssload.net/en/horizontal-bars))
  - Three Dimensional ([Demo + Source](http://cssload.net/en/3d-loaders))
  - Animated Text ([Demo + Source](http://cssload.net/en/animated-text))
  - Misc - some are really cool! ([Demo + Source](http://cssload.net/en/miscellaneous))
- CSS Only Loaders ([Demo](https://www.pexels.com/blog/css-only-loaders/))
- [ArtWorx] xLoader by Anas Tawfeek ([Demo](http://anastawfeek.github.io/ArtWorx-xLoader/)) ([Source](https://github.com/AnasTawfeek/ArtWorx-xLoader))
- Halogen (React spinner library) by Yuan Yan ([Demo](http://yuanyan.github.io/halogen/)) ([Source](https://github.com/yuanyan/halogen))
- Loaders.css by Connor Atherton ([Demo](https://connoratherton.com/loaders)) ([Source](https://github.com/ConnorAtherton/loaders.css))
- CSS Spinners by Oskar Gustafsson ([Demo](http://oskargustafsson.github.io/CSS-spinners/)) ([Source](https://github.com/oskargustafsson/CSS-spinners))
- Less Loaders by JesGraPa ([Demo + Source](https://codepen.io/JesGraPa/pen/Hyaiw))
- CSS cubic loader by Lokesh Suthat ([Demo + Source](https://codepen.io/magnus16/pen/rbEju))
- Wavy Loading Animations by Kyle Brumm ([Demo + Source](https://codepen.io/kjbrum/pen/BraCg))
- Equalizes the loader by Caohim ([Demo + Source](https://codepen.io/caohim/pen/tseIj))
- Ouroboros Spinner by Tom Genoni ([Demo](http://www.atomeye.com/writing/ouroboros.html)) ([Source](https://github.com/tomgenoni/ouroboros))
- React Activity Indicators by Luke Vella ([Demo](https://react-activity.lukevella.com)) ([Source](https://github.com/lukevella/react-activity))

## Single-element CSS

- CSS Spinners by John Long ([Source](https://github.com/jlong/css-spinners))
- css-spinners-react (React adaptation of CSS Spinners by John Long) by Adam Wanninger ([Source](https://github.com/ajwann/css-spinners-react))
- Loaders Kit by Viduthalai Mani ([Demo](http://cssdeck.com/labs/loaderskit))
- Single Element CSS Spinners by Luke Haas ([Demo](https://projects.lukehaas.me/css-loaders/)) ([Source](https://github.com/lukehaas/css-loaders))
- CSS Loading Spinners by Harold Soto ([Demo & Source](https://codepen.io/bernethe/pen/dorozd))
- Simple Spinner by Vineeth.TR ([Demo & Source](https://codepen.io/vineethtr/pen/GJpxoQ))
- Circular CSS Spinners by zeesx ([Demo & Source](https://codepen.io/zessx/pen/RNPKKK))
- Collection of animated loaders by Ana Tudor ([Demo & Source](https://codepen.io/thebabydino/pen/pxnld))
- CSS Loading Spinners by Beau ([Demo & Source](https://codepen.io/Beaugust/pen/DByiE))
- Motion Blur Loader by Alex Bergin ([Demo & Source](https://codepen.io/jonmilner/pen/hDHuo))

## Zero-element CSS
- Zero Element Loading Animations by Mike Riethmuller ([Demo + Source](https://madebymike.com.au/writing/zero-element-loading-animations/))

## SVG

- SVG-Loaders by Sam Hambert ([Demo](http://samherbert.net/svg-loaders/)) ([Source](https://github.com/SamHerbert/SVG-Loaders))
- svg-loaders-react (React adaptation of SVG-Loaders) by Adam Wanninger ([Source](https://github.com/ajwann/svg-loaders-react))
- Tumblr Style Cog Spinners by Pasquale Vitiello ([Demo](http://pasqualevitiello.github.io/Tumblr-Style-Cog-Spinners/)) ([Source](https://github.com/pasqualevitiello/Tumblr-Style-Cog-Spinners/))
- SVG Loader Animation by Nikhil Krishnan ([Demo + Source](https://codepen.io/nikhil8krishnan/pen/rVoXJa))
- Animated Spinners by Ionic ([Demo + Source](https://codepen.io/ionic/pen/GgwVON))
- SVG Preloaders by Alex ([Demo + Source](https://codepen.io/akwright/pen/kjslC))
- Pulse Loading by GoApp ([Demo + Source](https://codepen.io/goapp/pen/kIfDC))
- SVG Loading Icons by Aurer ([Demo + Source](https://codepen.io/aurer/pen/jEGbA))
- Material Design Spinner ([Demo + Source](https://codepen.io/mrrocks/pen/EiplA))

## JS and CSS

- Loaders and Spinners by Tim Holman ([Demo](https://codepen.io/collection/HtAne/))
- Colorful Square Spinner by Tim Holman ([Demo](https://codepen.io/tholman/pen/mqhJb))

## Canvas

- Canvas Sparkly Circle Loader by Jack Rugile ([Demo](https://codepen.io/jackrugile/pen/JAKbg))
- Sonic.js by James Padolsey ([Demo](http://padolsey.github.io/sonic-creator/#default)) ([Source](https://github.com/padolsey/sonic.js))

## Build Your Own Spinner

- Loading.io ([Demo](https://loading.io/))
- Spin Cycle - CSS-powered spinner from any inline SVG by Chris Hart ([Demo + Source](https://codepen.io/personable/pen/jPMXPv))
- Spin.js by Felix Gnass ([Demo](http://spin.js.org/)) ([Source](https://github.com/fgnass/spin.js))

## Other Collections

- 10+ Best Pure CSS Loading Spinners For Front-end Developers by 365 Web Resources ([List](https://365webresources.com/10-best-pure-css-loading-spinners-front-end-developers/))
- Reddit Community Challenge: Design a CSS Spinner ([List](https://www.reddit.com/r/web_design/comments/2dwj5p/community_challenge_design_a_css_spinner/))

## Contribute

Contributions welcome! Read the [contribution guidelines](CONTRIBUTING.md) first.

## License

[![Creative Commons License](https://licensebuttons.net/l/by/4.0/88x31.png)](https://creativecommons.org/licenses/by/4.0/)

This work is licensed under a [Creative Commons Attribution 4.0 International License](https://creativecommons.org/licenses/by/4.0/).

awesome-spinners

Explore Similar Repositories

Was this content helpful?

Recent Feedback

Download README