{"id":13421912,"url":"https://github.com/davidhu2000/react-spinners","last_synced_at":"2025-05-14T21:02:37.587Z","repository":{"id":38896559,"uuid":"96266792","full_name":"davidhu2000/react-spinners","owner":"davidhu2000","description":"A collection of loading spinner components for react","archived":false,"fork":false,"pushed_at":"2025-05-05T04:54:50.000Z","size":13952,"stargazers_count":3235,"open_issues_count":14,"forks_count":277,"subscribers_count":18,"default_branch":"main","last_synced_at":"2025-05-05T05:32:52.496Z","etag":null,"topics":["component","loader","loading","loading-spinners","progressbar","react","react-component","react-spinners","reactjs","spinners"],"latest_commit_sha":null,"homepage":"https://www.davidhu.io/react-spinners","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/davidhu2000.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":"CODEOWNERS","security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2017-07-05T02:02:42.000Z","updated_at":"2025-05-05T04:54:52.000Z","dependencies_parsed_at":"2023-02-11T23:10:28.081Z","dependency_job_id":"a8411385-3e99-4439-9144-005404d51a7f","html_url":"https://github.com/davidhu2000/react-spinners","commit_stats":{"total_commits":753,"total_committers":28,"mean_commits":"26.892857142857142","dds":"0.17131474103585653","last_synced_commit":"75befcadc92381764b25b5ef2ea54c9296df57f5"},"previous_names":[],"tags_count":114,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/davidhu2000%2Freact-spinners","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/davidhu2000%2Freact-spinners/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/davidhu2000%2Freact-spinners/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/davidhu2000%2Freact-spinners/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/davidhu2000","download_url":"https://codeload.github.com/davidhu2000/react-spinners/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252448510,"owners_count":21749490,"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":["component","loader","loading","loading-spinners","progressbar","react","react-component","react-spinners","reactjs","spinners"],"created_at":"2024-07-30T23:00:33.728Z","updated_at":"2025-05-07T07:43:09.534Z","avatar_url":"https://github.com/davidhu2000.png","language":"TypeScript","funding_links":[],"categories":["UI Components","TypeScript"],"sub_categories":["Loader"],"readme":"# React Spinners\n\n[![npm version](https://badge.fury.io/js/react-spinners.svg)][npm_url]\n[![downloads](https://img.shields.io/npm/dt/react-spinners.svg)][npm_url]\n[![license](https://img.shields.io/npm/l/react-spinners.svg)][npm_url]\n\n\u003c!-- [![next version](https://badgen.net/npm/v/react-spinners/next)](https://www.npmjs.com/package/react-spinners/v/next) --\u003e\n\n[![Coverage Status](https://coveralls.io/repos/github/davidhu2000/react-spinners/badge.svg?branch=main)](https://coveralls.io/github/davidhu2000/react-spinners?branch=master)\n![Dependency Count](https://badgen.net/bundlephobia/dependency-count/react-spinners)\n![Types Included](https://badgen.net/npm/types/react-spinners)\n![Tree Shaking Supported](https://badgen.net/bundlephobia/tree-shaking/react-spinners)\n\n[npm_url]: https://www.npmjs.org/package/react-spinners\n\nA collection of loading spinners with React.js based on [Halogen](https://github.com/yuanyan/halogen).\n\nThis package is bootstraped using [react-npm-boilerplate](https://github.com/juliancwirko/react-npm-boilerplate)\n\n## Demo\n\n[Demo Page](https://www.davidhu.io/react-spinners)\n\n[Storybook](https://www.davidhu.io/react-spinners/storybook/)\n\n## Installation\n\nWith Yarn:\n\n```bash\nyarn add react-spinners\n```\n\nWith npm:\n\n```bash\nnpm install --save react-spinners\n```\n\n## Usage\n\nEach loader has their own default properties. You can overwrite the defaults by passing props into the loaders.\n\nEach loader accepts a `loading` prop as a boolean. The loader will render `null` if `loading` is `false`.\n\n### Example\n\n```tsx\nimport { useState, CSSProperties } from \"react\";\nimport { ClipLoader } from \"react-spinners\";\n\nconst override: CSSProperties = {\n  display: \"block\",\n  margin: \"0 auto\",\n  borderColor: \"red\",\n};\n\nfunction App() {\n  let [loading, setLoading] = useState(true);\n  let [color, setColor] = useState(\"#ffffff\");\n\n  return (\n    \u003cdiv className=\"sweet-loading\"\u003e\n      \u003cbutton onClick={() =\u003e setLoading(!loading)}\u003eToggle Loader\u003c/button\u003e\n      \u003cinput\n        value={color}\n        onChange={(input) =\u003e setColor(input.target.value)}\n        placeholder=\"Color of the loader\"\n      /\u003e\n\n      \u003cClipLoader\n        color={color}\n        loading={loading}\n        cssOverride={override}\n        size={150}\n        aria-label=\"Loading Spinner\"\n        data-testid=\"loader\"\n      /\u003e\n    \u003c/div\u003e\n  );\n}\n\nexport default App;\n```\n\n\u003cdetails\u003e\u003csummary\u003eExample using React Class\u003c/summary\u003e\n\n```tsx\nimport React from \"react\";\nimport { ClipLoader } from \"react-spinners\";\n\nconst override: React.CSSProperties = {\n  display: \"block\",\n  margin: \"0 auto\",\n  borderColor: \"red\",\n};\n\nclass AwesomeComponent extends React.Component {\n  constructor(props) {\n    super(props);\n    this.state = {\n      loading: true,\n    };\n  }\n\n  render() {\n    return (\n      \u003cdiv className=\"sweet-loading\"\u003e\n        \u003cClipLoader\n          cssOverride={override}\n          size={150}\n          color={\"#123abc\"}\n          loading={this.state.loading}\n          speedMultiplier={1.5}\n          aria-label=\"Loading Spinner\"\n          data-testid=\"loader\"\n        /\u003e\n      \u003c/div\u003e\n    );\n  }\n}\n```\n\n\u003c/details\u003e\n\n## Available Loaders, PropTypes, and Default Values\n\nCommon default props for all loaders:\n\n```\nloading: true;\ncolor: \"#000000\";\ncssOverride: {}\nspeedMultiplier: 1;\n```\n\nAll valid HTML props such as `aria-*` and `data-*` props are fully supported.\n\n### `color` prop\n\n`color` prop accepts a color hash in the format of `#XXXXXX` or `#XXX`. It also accepts basic colors listed below:\n\n\u003e maroon, red, orange, yellow, olive, green, purple, white,\n\u003e fuchsia, lime, teal, aqua, blue, navy, black, gray, silver\n\n### `cssOverride` prop\n\nThe `cssOverride` prop is an object of camelCase styles used to create inline styles on the loaders. Any html css property is valid here.\n\n### `size`, `height`, `width`, and `radius` props\n\nThe input to these props can be _number_ or _string_.\n\n- If value is number, the loader will default to css unit `px`.\n- If value is string, the loader will verify the unit against valid css units.\n  - If unit is valid, return the original value\n  - If unit is invalid, output warning console log and default to `px`.\n\nThe table below has the default values for each loader.\n\n|            Loader | size | height | width | radius | margin |\n| ----------------: | :--: | :----: | :---: | :----: | :----: |\n|         BarLoader |      |  `4`   | `100` |        |\n|        BeatLoader | `15` |        |       |        |  `2`   |\n|      BounceLoader | `60` |        |       |        |\n|      CircleLoader | `50` |        |       |        |\n| ClimbingBoxLoader | `15` |        |       |        |\n|        ClipLoader | `35` |        |       |        |\n|       ClockLoader | `50` |        |       |        |\n|         DotLoader | `60` |        |       |        |  `2`   |\n|        FadeLoader |      |  `15`  |  `5`  |  `2`   |  `2`   |\n|        GridLoader | `15` |        |       |        |\n|        HashLoader | `50` |        |       |        |  `2`   |\n|        MoonLoader | `60` |        |       |        |  `2`   |\n|      PacmanLoader | `25` |        |       |        |  `2`   |\n|   PropagateLoader | `15` |        |       |        |\n|        PuffLoader | `60` |        |       |        |\n|       PulseLoader | `15` |        |       |        |  `2`   |\n|        RingLoader | `60` |        |       |        |  `2`   |\n|        RiseLoader | `15` |        |       |        |  `2`   |\n|      RotateLoader | `15` |        |       |        |  `2`   |\n|       ScaleLoader |      |  `35`  |  `4`  |  `2`   |  `2`   |\n|        SyncLoader | `15` |        |       |        |  `2`   |\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdavidhu2000%2Freact-spinners","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdavidhu2000%2Freact-spinners","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdavidhu2000%2Freact-spinners/lists"}