Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/yangshun/awesome-spinners

💫 A curated collection of dazzling web spinners
https://github.com/yangshun/awesome-spinners

List: awesome-spinners

awesome awesome-list css css-spinners spinners

Last synced: about 2 months ago
JSON representation

💫 A curated collection of dazzling web spinners

Host: GitHub
URL: https://github.com/yangshun/awesome-spinners
Owner: yangshun
Created: 2016-01-18T14:43:52.000Z (over 8 years ago)
Default Branch: master
Last Pushed: 2022-02-07T09:49:49.000Z (over 2 years ago)
Last Synced: 2024-05-23T09:36:31.001Z (4 months ago)
Topics: awesome, awesome-list, css, css-spinners, spinners
Language: JavaScript
Homepage:
Size: 14.6 KB
Stars: 1,347
Watchers: 26
Forks: 83
Open Issues: 2
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md

Awesome Lists containing this project

more-awesome - Spinners - Dazzling web spinners. (Front-End Development)
ultimate-awesome - awesome-spinners - 💫 A curated collection of dazzling web spinners. (Other Lists / PowerShell Lists)
jimsghstars - yangshun/awesome-spinners - 💫 A curated collection of dazzling web spinners (JavaScript)

README

        # 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/).