{"id":17114681,"url":"https://github.com/dmitrymorozoff/react-spinners-kit","last_synced_at":"2025-04-04T14:07:38.998Z","repository":{"id":33125666,"uuid":"148996181","full_name":"dmitrymorozoff/react-spinners-kit","owner":"dmitrymorozoff","description":"A collection of loading spinners with React.js","archived":false,"fork":false,"pushed_at":"2023-05-31T16:54:53.000Z","size":3311,"stargazers_count":264,"open_issues_count":24,"forks_count":44,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-03-28T13:08:39.221Z","etag":null,"topics":["javascript","loaders","loading-spinners","progressbar","react","react-components","react-spinners","spinner","spinners"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","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/dmitrymorozoff.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-09-16T13:01:41.000Z","updated_at":"2025-03-13T08:27:30.000Z","dependencies_parsed_at":"2024-06-18T13:34:28.198Z","dependency_job_id":"5453790f-80d5-45a9-a6c1-e66b8f2acb55","html_url":"https://github.com/dmitrymorozoff/react-spinners-kit","commit_stats":{"total_commits":62,"total_committers":1,"mean_commits":62.0,"dds":0.0,"last_synced_commit":"7f5fc1a50b5d1758c3c33fbfe65073d48641735d"},"previous_names":[],"tags_count":32,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dmitrymorozoff%2Freact-spinners-kit","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dmitrymorozoff%2Freact-spinners-kit/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dmitrymorozoff%2Freact-spinners-kit/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dmitrymorozoff%2Freact-spinners-kit/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dmitrymorozoff","download_url":"https://codeload.github.com/dmitrymorozoff/react-spinners-kit/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247190250,"owners_count":20898702,"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":["javascript","loaders","loading-spinners","progressbar","react","react-components","react-spinners","spinner","spinners"],"created_at":"2024-10-14T17:19:46.351Z","updated_at":"2025-04-04T14:07:38.975Z","avatar_url":"https://github.com/dmitrymorozoff.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Spinners Kit\n\n![npm version](https://badge.fury.io/js/react-spinners-kit.svg)\n[![Build Status](https://travis-ci.org/dmitrymorozoff/react-spinners-kit.svg?branch=master)](https://travis-ci.org/dmitrymorozoff/react-spinners-kit)\n![downloads](https://img.shields.io/npm/dt/react-spinners-kit.svg)\n![license](https://img.shields.io/npm/l/react-spinners-kit.svg)\n\nA collection of loading spinners built with [styled-components](https://styled-components.com).\n\n![Imgur](https://i.imgur.com/u71LDTs.gif)\n\n## Live Demo\n\n-   To check out live examples visit https://dmitrymorozoff.github.io/react-spinners-kit/\n\n## 🚀 Installation\n\nInstall `react-spinners-kit` using npm.\n\n### `npm install --save react-spinners-kit`\n\nor if you prefer yarn\n\n### `yarn add react-spinners-kit`\n\n## 👨🏻‍💻 Usage\n\n```jsx\nimport React from \"react\";\nimport ReactDOM from \"react-dom\";\nimport { PushSpinner } from \"react-spinners-kit\";\n\nclass App extends React.Component {\n    constructor(props) {\n        super(props);\n        this.state = {\n            loading: true,\n        };\n    }\n\n    render() {\n        const { loading } = this.state;\n        return \u003cPushSpinner size={30} color=\"#686769\" loading={loading} /\u003e;\n    }\n}\n\nReactDOM.render(\u003cApp /\u003e, document.getElementById(\"root\"));\n```\n\n## 📃 PropTypes and Default Props\n\n-   Each spinner accepts a `loading` prop as a boolean.\n-   The `loading` prop defaults to `true`.\n-   The loader will not render anything if `loading` is `false`.\n\n| Spinner          | size: number | color: string | frontColor: string | backColor: string | sizeUnit: string |\n| ---------------- | ------------ | ------------- | ------------------ | ----------------- | ---------------- |\n| BallSpinner      | `40`         | `#00ff89`     | -                  | -                 | `px`             |\n| BarsSpinner      | `40`         | `#00ff89`     | -                  | -                 | `px`             |\n| CircleSpinner    | `30`         | `#fff`        | -                  | -                 | `px`             |\n| CubeSpinner      | `25`         | -             | `#00ff89`          | `#686769`         | `px`             |\n| DominoSpinner    | `100`        | `#686769`     | -                  | -                 | `px`             |\n| FillSpinner      | `20`         | `#686769`     | -                  | -                 | `px`             |\n| FireworkSpinner  | `40`         | `#fff`        | -                  | -                 | `px`             |\n| FlagSpinner      | `40`         | `#fff`        | -                  | -                 | `px`             |\n| GridSpinner      | `40`         | `#fff`        | -                  | -                 | `px`             |\n| GuardSpinner     | `40`         | -             | `#00ff89`          | `#686769`         | `px`             |\n| HeartSpinner     | `40`         | `#fff`        | -                  | -                 | `px`             |\n| ImpulseSpinner   | `40`         | -             | `#00ff89`          | `#686769`         | `px`             |\n| PulseSpinner     | `40`         | `#fff`        | -                  | -                 | `px`             |\n| PushSpinner      | `30`         | `#686769`     | -                  | -                 | `px`             |\n| SequenceSpinner  | `40`         | -             | `#00ff89`          | `#686769`         | `px`             |\n| SphereSpinner    | `30`         | `#fff`        | -                  | -                 | `px`             |\n| SpiralSpinner    | `40`         |               | `#00ff89`          | `#686769`         | `px`             |\n| StageSpinner     | `40`         | `#fff`        | -                  | -                 | `px`             |\n| SwapSpinner      | `40`         | `#686769`     | -                  | -                 | `px`             |\n| WaveSpinner      | `30`         | `#fff`        | -                  | -                 | `px`             |\n| ClapSpinner      | `30`         | -             | `#00ff89`          | `#686769`         | `px`             |\n| RotateSpinner    | `45`         | `#00ff89`     | -                  | -                 | `px`             |\n| SwishSpinner     | `40`         | -             | `#4b4c56`          | `#fff`            | `px`             |\n| GooSpinner       | `55`         | `#fff`        | -                  | -                 | `px`             |\n| CombSpinner      | `100`        | `#fff`        | -                  | -                 | `px`             |\n| PongSpinner      | `60`         | `#4b4c56`     | -                  | -                 | `px`             |\n| RainbowSpinner   | `50`         | `#fff`        | -                  | -                 | `px`             |\n| RingSpinner      | `30`         | `#00ff89`     | -                  | -                 | `px`             |\n| HoopSpinner      | `45`         | `#4b4c56`     | -                  | -                 | `px`             |\n| FlapperSpinner   | `30`         | `#00ff89`     | -                  | -                 | `px`             |\n| MagicSpinner     | `70`         | `#fff`        | -                  | -                 | `px`             |\n| JellyfishSpinner | `60`         | `#4b4c56`     | -                  | -                 | `px`             |\n| TraceSpinner     | `70`         | -             | `#00ff89`          | `#4b4c56`         | `px`             |\n| ClassicSpinner   | `30`         | `#fff`        | -                  | -                 | `px`             |\n| MetroSpinner     | `40`         | `#fff`        | -                  | -                 | `px`             |\n| WhisperSpinner   | `50`         | `#fff`        | `#4b4c56`          | `#00ff89`         | `px`             |\n\n## Development\n\nYou can also test the components locally by cloning this repo and doing the following steps:\n\nInstall dependencies from `package.json`:\n\n### `npm install`\n\nRuns the app in the development mode.\u003cbr\u003e\nOpen [http://localhost:1234](http://localhost:1234) to view it in the browser.\n\n### `npm start`\n\nRun linter\n\n### `npm run lint`\n\n## 💻 Contributing\n\n-   Pull requests and ⭐ stars are always welcome\n-   For bugs and feature requests, please create an issue\n-   Lint and test your code\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdmitrymorozoff%2Freact-spinners-kit","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdmitrymorozoff%2Freact-spinners-kit","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdmitrymorozoff%2Freact-spinners-kit/lists"}