{"id":13421909,"url":"https://github.com/JoshK2/react-spinners-css","last_synced_at":"2025-03-15T10:31:26.133Z","repository":{"id":35088102,"uuid":"205101803","full_name":"JoshK2/react-spinners-css","owner":"JoshK2","description":"Amazing collection of React spinners components with pure css","archived":false,"fork":false,"pushed_at":"2023-07-19T05:05:53.000Z","size":3229,"stargazers_count":322,"open_issues_count":6,"forks_count":20,"subscribers_count":5,"default_branch":"master","last_synced_at":"2024-10-13T11:12:54.038Z","etag":null,"topics":["animation","animations","css","css-spinners","loaders","progress","react","react-spinners","spinners"],"latest_commit_sha":null,"homepage":"https://bit.dev/joshk/react-spinners-css","language":"TypeScript","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/JoshK2.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,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2019-08-29T07:02:58.000Z","updated_at":"2024-08-31T13:57:38.000Z","dependencies_parsed_at":"2024-04-17T11:34:16.758Z","dependency_job_id":"f2cae829-d635-4020-9a34-afb0b5f00b3d","html_url":"https://github.com/JoshK2/react-spinners-css","commit_stats":{"total_commits":137,"total_committers":8,"mean_commits":17.125,"dds":"0.27007299270072993","last_synced_commit":"5adf1dde27bf22b635728ddace8a2af2991eac0c"},"previous_names":[],"tags_count":10,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JoshK2%2Freact-spinners-css","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JoshK2%2Freact-spinners-css/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JoshK2%2Freact-spinners-css/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JoshK2%2Freact-spinners-css/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/JoshK2","download_url":"https://codeload.github.com/JoshK2/react-spinners-css/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243318755,"owners_count":20272142,"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":["animation","animations","css","css-spinners","loaders","progress","react","react-spinners","spinners"],"created_at":"2024-07-30T23:00:33.706Z","updated_at":"2025-03-15T10:31:26.127Z","avatar_url":"https://github.com/JoshK2.png","language":"TypeScript","readme":"# React Spinners CSS Loaders ([Vue](https://github.com/JoshK2/vue-spinners-css), [Angular](https://github.com/JoshK2/ng-spinners), [Blazor](https://github.com/ayodejii/blazor-spinner-css))\n\n[![bit components](https://img.shields.io/badge/bit_components-14-6e3991)](https://bit.cloud/joshk/react-spinners-css)\n[![npm version](https://badge.fury.io/js/react-spinners-css.svg)](https://www.npmjs.com/package/react-spinners-css)\n[![GitHub stars](https://img.shields.io/github/stars/joshk2/react-spinners-css)](https://github.com/JoshK2/react-spinners-css/stargazers)\n[![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://raw.githubusercontent.com/JoshK2/react-spinners-css/master/LICENSE)\n[![Twitter Follow](https://img.shields.io/twitter/follow/joshkuttler)](https://twitter.com/JoshKuttler)\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://bit.cloud/joshk/react-spinners-css\"\u003e\u003cimg src=\"https://i.imagesup.co/images2/1d67baaff0ba984979234d95271099843299dda1.gif\"\u003e\u003c/a\u003e\n\u003c/p\u003e\n\nAmazing collection of React spinners components with pure css.  \nThe React spinners are based on loading.io and from all over the web.  \nIf you want to add your own spinner, please follow the [contributing guidelines](CONTRIBUTING.md).\n\n- 💅 No extra CSS imports\n- ✂️ Zero dependencies\n- 📦 Spinners can be installing separately\n\n## [Live Demo](https://bit.cloud/joshk/react-spinners-css)\n\nBrowse components and explore their props with [Bit](https://bit.cloud/joshk/react-spinners-css).  \nInstall specific react spinner component with npm, yarn or bit without having to install the whole project.  \n[Install components and live demo](https://bit.cloud/joshk/react-spinners-css)  \n\u003ca href=\"https://bit.cloud/joshk/react-spinners-css\" target=\"_blank\"\u003e\u003cimg width=\"200\" height=\"39\" src=\"https://i.imagesup.co/images2/4a64f008951cd66e56d4f1e0141a27df584a1e94.png\"\u003e\u003c/a\u003e\n\n## 🚀 List of Spinners\n\nEach component accepts a `color` prop, and few accepts also `size` prop.  \nThe default `color` prop is `#7f58af`.  \nComponent that accepts `size` prop have a default size in pixel.\n\n| Spinner        | color: string | size: number | className: string | style: object |\n| -------------- | ------------- | ------------ | ----------------- | ------------- |\n| `\u003cCircle/\u003e`    | `#7f58af`     | `64`         | `\"\"`              | `{}`          |\n| `\u003cDefault/\u003e`   | `#7f58af`     | `80`         | `\"\"`              | `{}`          |\n| `\u003cEllipsis/\u003e`  | `#7f58af`     | `80`         | `\"\"`              | `{}`          |\n| `\u003cDualRing/\u003e`  | `#7f58af`     | `80`         | `\"\"`              | `{}`          |\n| `\u003cFacebook/\u003e`  | `#7f58af`     | `80`         | `\"\"`              | `{}`          |\n| `\u003cGrid/\u003e`      | `#7f58af`     | `80`         | `\"\"`              | `{}`          |\n| `\u003cHeart/\u003e`     | `#7f58af`     | `80`         | `\"\"`              | `{}`          |\n| `\u003cHourglass/\u003e` | `#7f58af`     | `32`         | `\"\"`              | `{}`          |\n| `\u003cRing/\u003e`      | `#7f58af`     | `80`         | `\"\"`              | `{}`          |\n| `\u003cRipple/\u003e`    | `#7f58af`     | `80`         | `\"\"`              | `{}`          |\n| `\u003cRoller/\u003e`    | `#7f58af`     | -            | `\"\"`              | `{}`          |\n| `\u003cSpinner/\u003e`   | `#7f58af`     | -            | `\"\"`              | `{}`          |\n| `\u003cOrbitals/\u003e`  | `#7f58af`     | -            | `\"\"`              | `{}`          |\n| `\u003cOuroboro/\u003e`  | `#7f58af`     | -            | `\"\"`              | `{}`          |\n\n## 📦 Installation\n\n### Using [npm](https://www.npmjs.com/package/react-spinners-css) to install react-spinners-css:\n\n```bash\n$ npm i --save react-spinners-css\n```\n\n### Play and install react spinners with Bit\n\nInstall specific react spinner component with bit, npm or yarn without having to install the whole project.  \nUsing [bit](https://bit.cloud/joshk/react-spinners-css) to play with live demo, and try the spinners before install.\n\nset npm regisetry config(one time action):\n\n```bash\nnpm config set @joshk:registry=\"https://node-registry.bit.cloud\"\n```\n\nand use your favorite package manager:\n\n```bash\nnpm i @joshk/react-spinners-css.heart\nyarn add @joshk/react-spinners-css.heart\nbit install @joshk/react-spinners-css.heart\n```\n\n## 💻 Usage Examples\n\n```javascript\n//using npm or yarn\nimport { Circle, Heart } from 'react-spinners-css';\n//using bit\nimport { Facebook } from '@joshk/react-spinners-css.facebook';\n...\nrender() {\n   return(\n     \u003cdiv\u003e\n       \u003cCircle /\u003e //default color is #7f58af\n       \u003cCircle color=\"red\" /\u003e\n       \u003cCircle color=\"#be97e8\" size={200} /\u003e //size prop is number in pixel\n       \u003cHeart /\u003e\n       \u003cFacebook /\u003e //default color is #7f58af\n       \u003cFacebook color=\"red\" /\u003e\n     \u003c/div\u003e\n   )\n}\n```\n\n## 👾 Development\n\nYou can see the components locally by cloning this repo and doing the following steps:\n\n- Install [Bit](https://bit.dev/docs/getting-started/installing-bit/installing-bit).\n- Run the project using `bit start`.\n\n## 🙌 Contributing\n\n- Pull requests and ⭐ stars are always welcome.\n- For bugs and feature requests, please create an issue.\n- If you want to add your own spinner, please follow the [contributing guidelines](CONTRIBUTING.md).\n- If you want to update or add features to some spinner, please follow the [contributing guidelines](CONTRIBUTING.md).\n\n## 👏🏻 Support my open-source\n\nIf you like to support my open-source contributions please star and share this project. 💫\n\n## 📄 License\n\n[MIT](https://github.com/JoshK2/react-spinners-css/blob/master/LICENSE)\n","funding_links":[],"categories":["UI Components","JavaScript","CSS"],"sub_categories":["Loader"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FJoshK2%2Freact-spinners-css","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FJoshK2%2Freact-spinners-css","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FJoshK2%2Freact-spinners-css/lists"}