{"id":13400122,"url":"https://github.com/tobiasahlin/SpinKit","last_synced_at":"2025-03-14T04:32:36.295Z","repository":{"id":12481029,"uuid":"15150300","full_name":"tobiasahlin/SpinKit","owner":"tobiasahlin","description":"A collection of loading indicators animated with CSS","archived":false,"fork":false,"pushed_at":"2020-08-01T09:04:59.000Z","size":265,"stargazers_count":19350,"open_issues_count":10,"forks_count":1812,"subscribers_count":450,"default_branch":"master","last_synced_at":"2024-10-30T04:54:44.248Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"http://tobiasahlin.com/spinkit/","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/tobiasahlin.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2013-12-12T23:29:41.000Z","updated_at":"2024-10-30T03:11:44.000Z","dependencies_parsed_at":"2022-07-14T08:09:01.069Z","dependency_job_id":null,"html_url":"https://github.com/tobiasahlin/SpinKit","commit_stats":null,"previous_names":[],"tags_count":11,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tobiasahlin%2FSpinKit","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tobiasahlin%2FSpinKit/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tobiasahlin%2FSpinKit/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tobiasahlin%2FSpinKit/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tobiasahlin","download_url":"https://codeload.github.com/tobiasahlin/SpinKit/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243039629,"owners_count":20226132,"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-07-30T19:00:48.623Z","updated_at":"2025-03-14T04:32:36.288Z","avatar_url":"https://github.com/tobiasahlin.png","language":"CSS","funding_links":[],"categories":["CSS","Loading","Loading Status","Frameworks / Resources","Loader","others","UI","Loading Status [🔝](#readme)","16. 动画(Animate) ##","前端/博客","加载状态","16. 动画(Animate)","Javascript","📦 Legacy \u0026 Inactive Projects","Uncategorized"],"sub_categories":["Loading","Runner","S","Save","13.20 视差滚动(Parallax Scrolling) ###","CSS","运行器","13.20 视差滚动(Parallax Scrolling)","运行器e2e测试","Uncategorized"],"readme":"# [SpinKit](http://tobiasahlin.com/spinkit/)\n\nSimple loading spinners animated with CSS. See [demo](http://tobiasahlin.com/spinkit/). SpinKit only uses (`transform` and `opacity`) CSS animations to create smooth and easily customizable animations.\n\n## Usage\n\n- Add `spinkit.css` or `spinkit.min.css` to your project (or copy-paste the CSS that you need for your spinner—there are no dependencies between spinners, no shared classes, and no shared animations, etc, so it should be fairly straight-forward to extract only the code that you need)\n- Add a spinner to your project by copy-pasting HTML from `spinkit.css` or `examples.html`\n- Add the `sk-center` utility class to the spinner to center it (it sets `margin` to `auto`)\n- By default, the `width` and `height` of all spinners are set to `40px`. `background-color` is set to `#333`.\n- Configure the spinner by overwriting the CSS variables, primarily `--sk-size` (spinner width \u0026 height) and `--sk-color` (spinner color). If you need broader browser support, remove the CSS variables.\n\nYou can include SpinKit to your project with `bower`:\n\n```bash\n$ bower install spinkit\n```\n\nor npm:\n\n```bash\n$ npm install spinkit\n```\n\n## Spinners\n\nGiven that you have included `spinkit.min.css` in your project, these snippets will produce the different spinners:\n\n### Plane\n\n```html\n\u003cdiv class=\"sk-plane\"\u003e\u003c/div\u003e\n```\n\n### Chase\n\n```html\n\u003cdiv class=\"sk-chase\"\u003e\n  \u003cdiv class=\"sk-chase-dot\"\u003e\u003c/div\u003e\n  \u003cdiv class=\"sk-chase-dot\"\u003e\u003c/div\u003e\n  \u003cdiv class=\"sk-chase-dot\"\u003e\u003c/div\u003e\n  \u003cdiv class=\"sk-chase-dot\"\u003e\u003c/div\u003e\n  \u003cdiv class=\"sk-chase-dot\"\u003e\u003c/div\u003e\n  \u003cdiv class=\"sk-chase-dot\"\u003e\u003c/div\u003e\n\u003c/div\u003e\n```\n\n### Bounce\n\n```html\n\u003cdiv class=\"sk-bounce\"\u003e\n  \u003cdiv class=\"sk-bounce-dot\"\u003e\u003c/div\u003e\n  \u003cdiv class=\"sk-bounce-dot\"\u003e\u003c/div\u003e\n\u003c/div\u003e\n```\n\n### Wave\n\n```html\n\u003cdiv class=\"sk-wave\"\u003e\n  \u003cdiv class=\"sk-wave-rect\"\u003e\u003c/div\u003e\n  \u003cdiv class=\"sk-wave-rect\"\u003e\u003c/div\u003e\n  \u003cdiv class=\"sk-wave-rect\"\u003e\u003c/div\u003e\n  \u003cdiv class=\"sk-wave-rect\"\u003e\u003c/div\u003e\n  \u003cdiv class=\"sk-wave-rect\"\u003e\u003c/div\u003e\n\u003c/div\u003e\n ```\n\n### Pulse\n\n```html\n\u003cdiv class=\"sk-pulse\"\u003e\u003c/div\u003e\n```\n\n### Flow\n\n```html\n\u003cdiv class=\"sk-flow\"\u003e\n  \u003cdiv class=\"sk-flow-dot\"\u003e\u003c/div\u003e\n  \u003cdiv class=\"sk-flow-dot\"\u003e\u003c/div\u003e\n  \u003cdiv class=\"sk-flow-dot\"\u003e\u003c/div\u003e\n\u003c/div\u003e\n```\n\n### Swing\n\n```html\n\u003cdiv class=\"sk-swing\"\u003e\n  \u003cdiv class=\"sk-swing-dot\"\u003e\u003c/div\u003e\n  \u003cdiv class=\"sk-swing-dot\"\u003e\u003c/div\u003e\n\u003c/div\u003e\n```\n\n### Circle\n\n```html\n\u003cdiv class=\"sk-circle\"\u003e\n  \u003cdiv class=\"sk-circle-dot\"\u003e\u003c/div\u003e\n  \u003cdiv class=\"sk-circle-dot\"\u003e\u003c/div\u003e\n  \u003cdiv class=\"sk-circle-dot\"\u003e\u003c/div\u003e\n  \u003cdiv class=\"sk-circle-dot\"\u003e\u003c/div\u003e\n  \u003cdiv class=\"sk-circle-dot\"\u003e\u003c/div\u003e\n  \u003cdiv class=\"sk-circle-dot\"\u003e\u003c/div\u003e\n  \u003cdiv class=\"sk-circle-dot\"\u003e\u003c/div\u003e\n  \u003cdiv class=\"sk-circle-dot\"\u003e\u003c/div\u003e\n  \u003cdiv class=\"sk-circle-dot\"\u003e\u003c/div\u003e\n  \u003cdiv class=\"sk-circle-dot\"\u003e\u003c/div\u003e\n  \u003cdiv class=\"sk-circle-dot\"\u003e\u003c/div\u003e\n  \u003cdiv class=\"sk-circle-dot\"\u003e\u003c/div\u003e\n\u003c/div\u003e\n```\n\n### Circle Fade\n\n```html\n\u003cdiv class=\"sk-circle-fade\"\u003e\n  \u003cdiv class=\"sk-circle-fade-dot\"\u003e\u003c/div\u003e\n  \u003cdiv class=\"sk-circle-fade-dot\"\u003e\u003c/div\u003e\n  \u003cdiv class=\"sk-circle-fade-dot\"\u003e\u003c/div\u003e\n  \u003cdiv class=\"sk-circle-fade-dot\"\u003e\u003c/div\u003e\n  \u003cdiv class=\"sk-circle-fade-dot\"\u003e\u003c/div\u003e\n  \u003cdiv class=\"sk-circle-fade-dot\"\u003e\u003c/div\u003e\n  \u003cdiv class=\"sk-circle-fade-dot\"\u003e\u003c/div\u003e\n  \u003cdiv class=\"sk-circle-fade-dot\"\u003e\u003c/div\u003e\n  \u003cdiv class=\"sk-circle-fade-dot\"\u003e\u003c/div\u003e\n  \u003cdiv class=\"sk-circle-fade-dot\"\u003e\u003c/div\u003e\n  \u003cdiv class=\"sk-circle-fade-dot\"\u003e\u003c/div\u003e\n  \u003cdiv class=\"sk-circle-fade-dot\"\u003e\u003c/div\u003e\n\u003c/div\u003e\n```\n\n### Grid\n\n```html\n\u003cdiv class=\"sk-grid\"\u003e\n  \u003cdiv class=\"sk-grid-cube\"\u003e\u003c/div\u003e\n  \u003cdiv class=\"sk-grid-cube\"\u003e\u003c/div\u003e\n  \u003cdiv class=\"sk-grid-cube\"\u003e\u003c/div\u003e\n  \u003cdiv class=\"sk-grid-cube\"\u003e\u003c/div\u003e\n  \u003cdiv class=\"sk-grid-cube\"\u003e\u003c/div\u003e\n  \u003cdiv class=\"sk-grid-cube\"\u003e\u003c/div\u003e\n  \u003cdiv class=\"sk-grid-cube\"\u003e\u003c/div\u003e\n  \u003cdiv class=\"sk-grid-cube\"\u003e\u003c/div\u003e\n  \u003cdiv class=\"sk-grid-cube\"\u003e\u003c/div\u003e\n\u003c/div\u003e\n```\n\n### Fold\n\n```html\n\u003cdiv class=\"sk-fold\"\u003e\n  \u003cdiv class=\"sk-fold-cube\"\u003e\u003c/div\u003e\n  \u003cdiv class=\"sk-fold-cube\"\u003e\u003c/div\u003e\n  \u003cdiv class=\"sk-fold-cube\"\u003e\u003c/div\u003e\n  \u003cdiv class=\"sk-fold-cube\"\u003e\u003c/div\u003e\n\u003c/div\u003e\n```\n\n### Wander\n\n```html\n\u003cdiv class=\"sk-wander\"\u003e\n  \u003cdiv class=\"sk-wander-cube\"\u003e\u003c/div\u003e\n  \u003cdiv class=\"sk-wander-cube\"\u003e\u003c/div\u003e\n  \u003cdiv class=\"sk-wander-cube\"\u003e\u003c/div\u003e\n\u003c/div\u003e\n```\n\n## Web browser compatibility\n\nSpinKit uses CSS animations and variables:\n\n- CSS keyframes animations [are at +96.5% global support](http://caniuse.com/#feat=css-animation)\n- CSS variables [are at +91.8% global support](https://caniuse.com/#feat=css-variables)\n\n### Implementing a fallback spinner\n\nHow do you know if you need to provide a fallback? You can check for animation support with [Modernizr](http://modernizr.com), or manually check for the `animation` property, and replace the spinner with a GIF if it's not supported:\n\n```javascript\nfunction browserSupportsCSSProperty(propertyName) {\n  var elm = document.createElement('div');\n  propertyName = propertyName.toLowerCase();\n\n  if (elm.style[propertyName] != undefined)\n    return true;\n\n  var propertyNameCapital = propertyName.charAt(0).toUpperCase() + propertyName.substr(1),\n    domPrefixes = 'Webkit Moz ms O'.split(' ');\n\n  for (var i = 0; i \u003c domPrefixes.length; i++) {\n    if (elm.style[domPrefixes[i] + propertyNameCapital] != undefined)\n      return true;\n  }\n\n  return false;\n}\n```\n\nUse it to check for `animation` support:\n\n```javascript\nif (!browserSupportsCSSProperty('animation')) {\n  // fallback…\n}\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftobiasahlin%2FSpinKit","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftobiasahlin%2FSpinKit","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftobiasahlin%2FSpinKit/lists"}