{"id":15304538,"url":"https://github.com/monkeymars/spinkit","last_synced_at":"2025-10-08T09:30:47.144Z","repository":{"id":149889853,"uuid":"50555248","full_name":"monkeymars/SpinKit","owner":"monkeymars","description":"A collection of loading indicators animated with CSS","archived":false,"fork":true,"pushed_at":"2015-12-09T21:32:00.000Z","size":934,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-10-02T07:56:49.602Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"http://tobiasahlin.com/spinkit/","language":"CSS","has_issues":false,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":"tobiasahlin/SpinKit","license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/monkeymars.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","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":"2016-01-28T04:29:00.000Z","updated_at":"2016-01-28T04:29:01.000Z","dependencies_parsed_at":"2023-04-15T13:21:28.525Z","dependency_job_id":null,"html_url":"https://github.com/monkeymars/SpinKit","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/monkeymars%2FSpinKit","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/monkeymars%2FSpinKit/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/monkeymars%2FSpinKit/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/monkeymars%2FSpinKit/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/monkeymars","download_url":"https://codeload.github.com/monkeymars/SpinKit/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":235700110,"owners_count":19031668,"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-01T07:56:51.565Z","updated_at":"2025-10-08T09:30:41.825Z","avatar_url":"https://github.com/monkeymars.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# [SpinKit](http://tobiasahlin.com/spinkit/)\n\nSimple loading spinners animated with CSS. See [demo](http://tobiasahlin.com/spinkit/). SpinKit uses hardware accelerated (`translate` and `opacity`) CSS animations to create smooth and easily customizable animations. \n\n## Usage\n\n### Regular CSS\n\nGrab the HTML and CSS for a spinner from the example files, or add SpinKit directly 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### SCSS\n\nIf you're using SCSS you can include specific spinners (rather than all of them) by importing them one by one:\n\n```scss\n@import '../bower_components/spinkit/scss/spinners/1-rotating-plane',\n        '../bower_components/spinkit/scss/spinners/3-wave';\n```\n\nYou currently need to use an [autoprefixer](https://github.com/postcss/autoprefixer) if you want to support all browsers. If you're compiling your SCSS with gulp you can use [gulp-autoprefixer](https://github.com/sindresorhus/gulp-autoprefixer), and [grunt-autoprefixer](https://github.com/nDmitry/grunt-autoprefixer) if you use grunt.\n\nVariables that can be overridden are listed in [scss/_variables.scss](https://github.com/tobiasahlin/SpinKit/blob/master/scss/_variables.scss).\n\n## Web browser compatibility\n\nCSS animations are supported in the latest version of all major browsers, and browsers with `animation` support make up [almost 90% of all usage](http://caniuse.com/#feat=css-animation). If you need to support IE9 and below, however, this section is for you.\n\n### Implementing a fallback spinner\n\nHow do you know if you need to provide a fallback? You can easily 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\n## Contributing\n\nSee [CONTRIBUTING.md](https://github.com/tobiasahlin/SpinKit/blob/master/CONTRIBUTING.md) for details.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmonkeymars%2Fspinkit","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmonkeymars%2Fspinkit","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmonkeymars%2Fspinkit/lists"}