{"id":3499,"url":"https://github.com/yangshun/awesome-spinners","name":"awesome-spinners","description":"💫 A curated collection of dazzling web spinners","projects_count":50,"last_synced_at":"2026-10-24T01:00:26.280Z","repository":{"id":37712956,"uuid":"49882982","full_name":"yangshun/awesome-spinners","owner":"yangshun","description":"💫 A curated collection of dazzling web spinners","archived":false,"fork":false,"pushed_at":"2022-02-07T09:49:49.000Z","size":15,"stargazers_count":1421,"open_issues_count":2,"forks_count":81,"subscribers_count":24,"default_branch":"master","last_synced_at":"2026-10-04T09:30:00.803Z","etag":null,"topics":["awesome","awesome-list","css","css-spinners","spinners"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/yangshun.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-01-18T14:43:52.000Z","updated_at":"2026-09-21T05:06:57.000Z","dependencies_parsed_at":"2022-07-08T01:35:15.895Z","dependency_job_id":null,"html_url":"https://github.com/yangshun/awesome-spinners","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/yangshun/awesome-spinners","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yangshun%2Fawesome-spinners","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yangshun%2Fawesome-spinners/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yangshun%2Fawesome-spinners/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yangshun%2Fawesome-spinners/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/yangshun","download_url":"https://codeload.github.com/yangshun/awesome-spinners/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yangshun%2Fawesome-spinners/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":343072799,"owners_count":37998123,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-10-03T21:59:58.778Z","status":"online","status_checked_at":"2026-10-04T02:00:06.888Z","response_time":127,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"created_at":"2024-01-06T00:03:14.821Z","updated_at":"2026-10-24T01:00:26.280Z","primary_language":null,"list_of_lists":false,"displayable":true,"categories":["License","CSS Only","Single-element CSS","SVG","JS and CSS","Canvas","Build Your Own Spinner","Other Collections"],"sub_categories":[],"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)\n\n\u003e A curated collection of dazzling web spinners.\n\n*Inspired by the [awesome](https://github.com/sindresorhus/awesome) list thing.*\n\n## Table of Contents\n\n- [CSS Only](#css-only)\n- [Single-element CSS](#single-element-css)\n- [Zero-element CSS](#zero-element-css)\n- [SVG](#svg)\n- [JS and CSS](#js-and-css)\n- [Canvas](#canvas)\n- [Build Your Own Spinner](#build-your-own-spinner)\n\n## CSS Only\n\n- Load Awesome by Daniel Cardoso ([Demo](http://github.danielcardoso.net/load-awesome/animations.html)) ([Source](https://github.com/danielcardoso/load-awesome))\n- SpinKit by Tobias Ahlin ([Demo](http://tobiasahlin.com/spinkit/)) ([Source](https://github.com/tobiasahlin/SpinKit))\n- CSS Load.net ([Demo + Source](http://cssload.net/))\n  - Spinners ([Demo + Source](http://cssload.net/en/spinners))\n  - Horizontal Bars ([Demo + Source](http://cssload.net/en/horizontal-bars))\n  - Three Dimensional ([Demo + Source](http://cssload.net/en/3d-loaders))\n  - Animated Text ([Demo + Source](http://cssload.net/en/animated-text))\n  - Misc - some are really cool! ([Demo + Source](http://cssload.net/en/miscellaneous))\n- CSS Only Loaders ([Demo](https://www.pexels.com/blog/css-only-loaders/))\n- [ArtWorx] xLoader by Anas Tawfeek ([Demo](http://anastawfeek.github.io/ArtWorx-xLoader/)) ([Source](https://github.com/AnasTawfeek/ArtWorx-xLoader))\n- Halogen (React spinner library) by Yuan Yan ([Demo](http://yuanyan.github.io/halogen/)) ([Source](https://github.com/yuanyan/halogen))\n- Loaders.css by Connor Atherton ([Demo](https://connoratherton.com/loaders)) ([Source](https://github.com/ConnorAtherton/loaders.css))\n- CSS Spinners by Oskar Gustafsson ([Demo](http://oskargustafsson.github.io/CSS-spinners/)) ([Source](https://github.com/oskargustafsson/CSS-spinners))\n- Less Loaders by JesGraPa ([Demo + Source](https://codepen.io/JesGraPa/pen/Hyaiw))\n- CSS cubic loader by Lokesh Suthat ([Demo + Source](https://codepen.io/magnus16/pen/rbEju))\n- Wavy Loading Animations by Kyle Brumm ([Demo + Source](https://codepen.io/kjbrum/pen/BraCg))\n- Equalizes the loader by Caohim ([Demo + Source](https://codepen.io/caohim/pen/tseIj))\n- Ouroboros Spinner by Tom Genoni ([Demo](http://www.atomeye.com/writing/ouroboros.html)) ([Source](https://github.com/tomgenoni/ouroboros))\n- React Activity Indicators by Luke Vella ([Demo](https://react-activity.lukevella.com)) ([Source](https://github.com/lukevella/react-activity))\n\n## Single-element CSS\n\n- CSS Spinners by John Long ([Source](https://github.com/jlong/css-spinners))\n- css-spinners-react (React adaptation of CSS Spinners by John Long) by Adam Wanninger ([Source](https://github.com/ajwann/css-spinners-react))\n- Loaders Kit by Viduthalai Mani ([Demo](http://cssdeck.com/labs/loaderskit))\n- Single Element CSS Spinners by Luke Haas ([Demo](https://projects.lukehaas.me/css-loaders/)) ([Source](https://github.com/lukehaas/css-loaders))\n- CSS Loading Spinners by Harold Soto ([Demo \u0026 Source](https://codepen.io/bernethe/pen/dorozd))\n- Simple Spinner by Vineeth.TR ([Demo \u0026 Source](https://codepen.io/vineethtr/pen/GJpxoQ))\n- Circular CSS Spinners by zeesx ([Demo \u0026 Source](https://codepen.io/zessx/pen/RNPKKK))\n- Collection of animated loaders by Ana Tudor ([Demo \u0026 Source](https://codepen.io/thebabydino/pen/pxnld))\n- CSS Loading Spinners by Beau ([Demo \u0026 Source](https://codepen.io/Beaugust/pen/DByiE))\n- Motion Blur Loader by Alex Bergin ([Demo \u0026 Source](https://codepen.io/jonmilner/pen/hDHuo))\n\n## Zero-element CSS\n- Zero Element Loading Animations by Mike Riethmuller ([Demo + Source](https://madebymike.com.au/writing/zero-element-loading-animations/))\n\n## SVG\n\n- SVG-Loaders by Sam Hambert ([Demo](http://samherbert.net/svg-loaders/)) ([Source](https://github.com/SamHerbert/SVG-Loaders))\n- svg-loaders-react (React adaptation of SVG-Loaders) by Adam Wanninger ([Source](https://github.com/ajwann/svg-loaders-react))\n- 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/))\n- SVG Loader Animation by Nikhil Krishnan ([Demo + Source](https://codepen.io/nikhil8krishnan/pen/rVoXJa))\n- Animated Spinners by Ionic ([Demo + Source](https://codepen.io/ionic/pen/GgwVON))\n- SVG Preloaders by Alex ([Demo + Source](https://codepen.io/akwright/pen/kjslC))\n- Pulse Loading by GoApp ([Demo + Source](https://codepen.io/goapp/pen/kIfDC))\n- SVG Loading Icons by Aurer ([Demo + Source](https://codepen.io/aurer/pen/jEGbA))\n- Material Design Spinner ([Demo + Source](https://codepen.io/mrrocks/pen/EiplA))\n\n## JS and CSS\n\n- Loaders and Spinners by Tim Holman ([Demo](https://codepen.io/collection/HtAne/))\n- Colorful Square Spinner by Tim Holman ([Demo](https://codepen.io/tholman/pen/mqhJb))\n\n## Canvas\n\n- Canvas Sparkly Circle Loader by Jack Rugile ([Demo](https://codepen.io/jackrugile/pen/JAKbg))\n- Sonic.js by James Padolsey ([Demo](http://padolsey.github.io/sonic-creator/#default)) ([Source](https://github.com/padolsey/sonic.js))\n\n## Build Your Own Spinner\n\n- Loading.io ([Demo](https://loading.io/))\n- Spin Cycle - CSS-powered spinner from any inline SVG by Chris Hart ([Demo + Source](https://codepen.io/personable/pen/jPMXPv))\n- Spin.js by Felix Gnass ([Demo](http://spin.js.org/)) ([Source](https://github.com/fgnass/spin.js))\n\n## Other Collections\n\n- 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/))\n- Reddit Community Challenge: Design a CSS Spinner ([List](https://www.reddit.com/r/web_design/comments/2dwj5p/community_challenge_design_a_css_spinner/))\n\n\n## Contribute\n\nContributions welcome! Read the [contribution guidelines](CONTRIBUTING.md) first.\n\n\n## License\n\n[![Creative Commons License](https://licensebuttons.net/l/by/4.0/88x31.png)](https://creativecommons.org/licenses/by/4.0/)\n\nThis work is licensed under a [Creative Commons Attribution 4.0 International License](https://creativecommons.org/licenses/by/4.0/).\n","projects_url":"https://awesome.ecosyste.ms/api/v1/lists/yangshun%2Fawesome-spinners/projects"}