{"id":17069779,"url":"https://github.com/jlong/css-spinners","last_synced_at":"2025-05-16T06:04:13.725Z","repository":{"id":8393383,"uuid":"9971036","full_name":"jlong/css-spinners","owner":"jlong","description":"Simple CSS spinners and throbbers made with CSS and minimal HTML markup.","archived":false,"fork":false,"pushed_at":"2019-12-30T17:24:35.000Z","size":175,"stargazers_count":924,"open_issues_count":7,"forks_count":156,"subscribers_count":29,"default_branch":"master","last_synced_at":"2025-05-10T10:09:57.842Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"http://www.css-spinners.com","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jlong.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2013-05-10T00:01:39.000Z","updated_at":"2025-04-01T10:47:51.000Z","dependencies_parsed_at":"2022-07-31T01:17:48.102Z","dependency_job_id":null,"html_url":"https://github.com/jlong/css-spinners","commit_stats":null,"previous_names":[],"tags_count":9,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jlong%2Fcss-spinners","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jlong%2Fcss-spinners/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jlong%2Fcss-spinners/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jlong%2Fcss-spinners/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jlong","download_url":"https://codeload.github.com/jlong/css-spinners/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254478163,"owners_count":22077675,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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"}},"keywords":[],"created_at":"2024-10-14T11:27:50.255Z","updated_at":"2025-05-16T06:04:13.665Z","avatar_url":"https://github.com/jlong.png","language":"CSS","funding_links":[],"categories":["Single-element CSS","CSS"],"sub_categories":["CSS Animation"],"readme":"CSS Spinners\n===========\n\nSimple CSS loading indicators made with CSS and minimal HTML markup.\n\n![screenshot](http://f.cl.ly/items/033Q0Q202X430L1S2Z0A/css-spinners.png)\n\nAll loading indicators are designed to be used with minimal markup:\n\n```html\n\u003cdiv class=\"loading-indicator\"\u003e\n\tLoading...\n\u003c/div\u003e\n```\n\nSimply replace \"loading-indicator\" with the class name of your choice.\n\nMarkup\n------\n\nTo use a specific loading indicator link the appropriate file:\n\n```html\n\u003clink rel=\"stylesheet\" href=\"css/spinner/throbber.css\"\u003e\n```\n\nOr, if you'd like to have access to the entire library of spinners you can link the root file:\n\n```html\n\u003clink rel=\"stylesheet\" href=\"css/spinners.css\"\u003e\n```\n\nThen apply the appropriate [class name](#class-names) for the spinner of your choice to the markup:\n\n```html\n\u003cdiv class=\"throbber-loader\"\u003e\n\tLoading...\n\u003c/div\u003e\n```\n\nClass names\n-----------\n\nThe full list of loading indicator class names are shown below. To see them in action, visit http://css-spinners.com/.\n\n| Class                  | Description                                                    |\n| ---------------------- | -------------------------------------------------------------- |\n| .spinner-loader        | Spinning circles.                                              |\n| .throbber-loader       | Animated Facebook-like throbber.                               |\n| .refreshing-loader     | Circular spinning arrow. Great for refreshing content.         |\n| .heartbeat-loader      | Animated beating heart.                                        |\n| .gauge-loader          | Animated speedometer-like gauge with rotating needle.          |\n| .three-quarters-loader | Minimal three-quarters donut spinner.                          |\n| .wobblebar-loader      | Animated wobbling progress bar.                                |\n| .atebits-loader        | Staight out of Letterpress, an animated rotating Atebits logo. |\n| .whirly-loader         | A comet-like rotating spinner.                                 |\n| .flower-loader         | An animated spinning flower.                                   |\n| .dots-loader           | Almost a rotating shell game. With dots!                       |\n| .circles-loader        | Three rotating multi-colored circles.                          |\n| .plus-loader           | Animated Google Plus-like loader.                              |\n| .ball-loader           | A bouncing ball.                                               |\n| .hexdots-loader        | Similar to the dots animation, but with six!                   |\n| .inner-circles-loader  | A filling circle with other circles                            |\n| .pong-loader           | Retro tennis-like game simulation from the 70s.                |\n| .pulse-loader          | A pulsing circle. Shrinking and enlarging.\t\t\t\t\t  |\t\t\t\t\t  \n| .spinning-pixels-loader| A spinning pixelated loader.             \t\t\t\t\t  |\t\t\t\t\t  | .echo-loader           | A Growing circle that fade-in-out.                              |\n\n\nCustomize with Sass\n-------------------\n\nMany of the spinners in this collection can be customized by tweaking variables included in the Sass [source files](sass/spinner).\n\n\nInstall with Bower\n------------------\n\nYou can install CSS Spinners with the following command, like any other [Bower](http://bower.io/) project:\n\n    $ bower install css-spinners\n\nCSS is available in the `css/` directory and Sass in the `sass/` directory.\n\n\nContributions\n-------------\n\nContributions are welcome! See [CONTRIBUTING.md](CONTRIBUTING.md) for details.\n\n\nLicense\n-------\n\nCSS Spinners is freely available under the MIT License. See [LICENSE](LICENSE) file for details.\n\n\nAdaptations\n-----------\n\n[React components](https://github.com/ajwann/css-spinners-react) by Adam Wanninger\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjlong%2Fcss-spinners","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjlong%2Fcss-spinners","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjlong%2Fcss-spinners/lists"}