{"id":13400597,"url":"https://github.com/KyleAMathews/react-spinkit","last_synced_at":"2025-03-14T06:31:45.909Z","repository":{"id":19598374,"uuid":"22848975","full_name":"KyleAMathews/react-spinkit","owner":"KyleAMathews","description":"A collection of loading indicators animated with CSS for React","archived":false,"fork":false,"pushed_at":"2022-12-06T14:39:31.000Z","size":3021,"stargazers_count":1493,"open_issues_count":48,"forks_count":73,"subscribers_count":17,"default_branch":"master","last_synced_at":"2025-02-14T10:50:52.195Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"http://kyleamathews.github.io/react-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/KyleAMathews.png","metadata":{"files":{"readme":"README.md","changelog":null,"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":"2014-08-11T18:01:20.000Z","updated_at":"2025-02-11T01:15:41.000Z","dependencies_parsed_at":"2023-01-14T07:45:45.022Z","dependency_job_id":null,"html_url":"https://github.com/KyleAMathews/react-spinkit","commit_stats":null,"previous_names":[],"tags_count":31,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KyleAMathews%2Freact-spinkit","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KyleAMathews%2Freact-spinkit/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KyleAMathews%2Freact-spinkit/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KyleAMathews%2Freact-spinkit/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/KyleAMathews","download_url":"https://codeload.github.com/KyleAMathews/react-spinkit/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":239683784,"owners_count":19680020,"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:53.748Z","updated_at":"2025-03-14T06:31:45.895Z","avatar_url":"https://github.com/KyleAMathews.png","language":"CSS","funding_links":[],"categories":["Uncategorized","Awesome React","UI Components","Demos","\u003csummary\u003eUI Components\u003c/summary\u003e","React [🔝](#readme)"],"sub_categories":["Uncategorized","Tools","Loader"],"readme":"react-spinkit\n=============\n\nA collection of loading indicators animated with CSS for React\n\nCurrently I've ported all the spinner animations from\n[Spinkit](https://github.com/tobiasahlin/SpinKit). If you have other favorite\n css spinner you'd like to include, open an issue.\n\n## Install\n\n```console\n$ npm install react-spinkit --save\n```\n\n## Usage\n```javascript\nvar Spinner = require('react-spinkit');\n\n\u003cSpinner name='double-bounce' /\u003e\n```\n\nSee more examples on the [demo page](http://kyleamathews.github.io/react-spinkit/).\n\n## CSS\nCSS is loaded automatically when using [Webpack](http://webpack.github.io) with the\n[css-loader](https://github.com/webpack/css-loader) and [style-loader](https://github.com/webpack/style-loader), or Browserify/[CSSify](https://github.com/davidguttman/cssify)\n to build your project.\n\n## External spinners\nThis also includes most of the spinners from [loaders.css](https://github.com/ConnorAtherton/loaders.css). Note that while\nall of the native spinners from Spinkit are contained within their bounding divs,\nsome of the loaders.css spinners have a zero-sized parent div and extend outward\nfrom that (as you can see on the demos page). Regardless of this, they are all\neasily centerable with flexbox.\n\n## Webpack or Browserify is required\nCurrently we only support Browserify and Webpack. If you'd like support\nfor other build tools that also support requiring CSS, PRs are welcome.\n\n## Fades in spinners after one second\nAccording to [research by Jakob Nielsen](http://www.nngroup.com/articles/response-times-3-important-limits/),\nfeedback after user operations isn't necessary for about a second so by\ndefault, react-spinkit will fade in your spinner at one second. Nevertheless,\nyou can configure spinner fade-in behavior with the `fadeIn` prop, which\naccepts values `full` (the default), `half`, `quarter`, and `none` for one\nsecond, a half second, a quarter second, and no fade in, respectively.\nFor example: `\u003cSpinner fadeIn='half' /\u003e`.\n\n## PropTypes\n* **name**—specify spinner to use (defaults to `three-bounce`).\n* **fadeIn**-set the time before the spinner fades in.\n* **overrideSpinnerClassName**—change the default `sk-spinner` className.\n* **className**-add a custom classname to the outer div.\n* **color**-programmatically set the color of the spinners; this can either be a\nhex value or a color word.\n\n## Server-side rendering\nIf you want to use this for server-side rendering, set\n`process.env.REACT_SPINKIT_NO_STYLES` in your server build environment,\nin webpack via `webpack.DefinePlugin`, or whatever is appropriate to your\nbuild process. This will skip the import of styles and allow evaluation of\nthe SpinKit code in node.\n\n## Demo and documentation\nhttp://kyleamathews.github.io/react-spinkit/\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FKyleAMathews%2Freact-spinkit","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FKyleAMathews%2Freact-spinkit","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FKyleAMathews%2Freact-spinkit/lists"}