{"id":23278688,"url":"https://github.com/kavindu-mane/react-magic-spinners","last_synced_at":"2025-04-06T12:42:50.829Z","repository":{"id":237368662,"uuid":"794392817","full_name":"kavindu-mane/react-magic-spinners","owner":"kavindu-mane","description":"✨ React Magic Spinners is a collection of loading spinners for React.js","archived":false,"fork":false,"pushed_at":"2024-05-08T03:53:32.000Z","size":1677,"stargazers_count":1,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-13T07:48:01.135Z","etag":null,"topics":["react-spin","spinners-react"],"latest_commit_sha":null,"homepage":"","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/kavindu-mane.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-05-01T03:47:15.000Z","updated_at":"2024-06-22T15:12:30.000Z","dependencies_parsed_at":"2024-12-19T22:33:57.165Z","dependency_job_id":"8d642605-b043-46b5-a7b1-c619432a25f5","html_url":"https://github.com/kavindu-mane/react-magic-spinners","commit_stats":null,"previous_names":["kavindu-mane/react-magic-spinners"],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kavindu-mane%2Freact-magic-spinners","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kavindu-mane%2Freact-magic-spinners/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kavindu-mane%2Freact-magic-spinners/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kavindu-mane%2Freact-magic-spinners/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kavindu-mane","download_url":"https://codeload.github.com/kavindu-mane/react-magic-spinners/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247485286,"owners_count":20946397,"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":["react-spin","spinners-react"],"created_at":"2024-12-19T22:33:42.315Z","updated_at":"2025-04-06T12:42:50.805Z","avatar_url":"https://github.com/kavindu-mane.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# \u003cp align = \"center\"\u003e🚀 React Magic Spinners.\u003c/p\u003e\n\n\u003cdiv align = \"center\"\u003e\n\u003cimg src = \"https://github.com/kavindu-mane/react-magic-spinners/blob/main/rms-cover.gif\" alt = \"cover\"/\u003e\n\u003c/div\u003e\n\n\u003cdiv align = \"center\"\u003e\n\u003cimg alt=\"GitHub top language\" src=\"https://img.shields.io/github/languages/top/kavindu-mane/react-magic-spinners\"\u003e\n\u003cimg alt=\"npm bundle size\" src=\"https://img.shields.io/bundlephobia/min/react-magic-spinners\"\u003e\n\u003cimg alt=\"npm\" src=\"https://img.shields.io/npm/v/react-magic-spinners?label=npm%20version\"\u003e\n\u003cbr/\u003e\n\u003cimg alt=\"GitHub\" src=\"https://img.shields.io/github/license/kavindu-mane/react-magic-spinners?color=success\"\u003e\n\u003cimg alt=\"npm\" src=\"https://img.shields.io/npm/dt/react-magic-spinners\"\u003e\n\u003c/div\u003e\n\n\u003cbr/\u003e\n\u003cdiv align = \"center\"\u003e\n\u003ca href = \"https://www.kavindu.me/projects/react-magic-spinners\" alt = \"demo\" \u003e\u003cimg src = \"https://img.shields.io/badge/_DEMO_-%2303C988.svg?style=for-the-badge\u0026\u0026logoColor=white\" alt = \"demo\"/\u003e\u003c/a\u003e\n \u003c/div\u003e\n \n## Installation\n_Install with npm:_\n\n```bash\nnpm i react-magic-spinners\n```\n\n_Install with bun:_\n\n```bash\nbun add react-magic-spinners\n```\n\n_Install with yarn:_\n\n```bash\nyarn add react-magic-spinners\n```\n\n_Install with pnpm:_\n\n```bash\npnpm add react-magic-spinners\n```\n\n## Usage\n _Import the spinner components:_\n\n```javascript\nimport { BeatLoader } from \"react-magic-spinners\";\n```\nNow you can use all components like bellow.\n\n _Use with default styles:_\n \n ```jsx\n\u003cBeatLoader/\u003e\n ```\n\n   _Use with props:_\n \n ```jsx\n\u003cBeatLoader\n  dotsSize={\"2rem\"}\n  duration={2}\n  dotsCount = {3}\n  iterationCount = \"infinity\"\n/\u003e\n```\n\n## Available Spinners\n * BarLoader\n * BeatLoader\n * BounceLoader\n * CircleLoader\n * ClimbingBoxLoader\n * ClipLoader\n * GridLoader\n * Writer\n  \n## Props\n\n\u003cdetails\u003e\n\u003csummary\u003eBarLoader\u003c/summary\u003e\n\n| Name            | Description                     | Default    | Required | Data Type           |\n|-----------------|---------------------------------|------------|----------|---------------------|\n| width           | Width of the loader             | `200`      | No       | number or string    |\n| height          | Height of the loader            | `10`       | No       | number or string    |\n| duration        | Duration of the animation       | `3`        | No       | number              |\n| color           | Color of the loader             | `#d20062`  | No       | string              |\n| trackColor      | Color of the loader's track     | `#d2006260`| No       | string              |\n| iterationCount  | Number of animation iterations  | `infinite` | No       | number or string    |\n| style           | CSS styles                      | `undefined`| No       | React.CSSProperties |\n| className       | CSS class name                  | `undefined`| No       | string              |\n| isRoundCap      | Whether the loader has round cap| `true`     | No       | boolean             |\n\n\u003c/details\u003e\n\n\n\u003cdetails\u003e\n\u003csummary\u003eBeatLoader\u003c/summary\u003e\n\n| Name               | Description                     | Default     | Required | Data Type           |\n|--------------------|---------------------------------|-------------|----------|---------------------|\n| dotsSize           | Size of the dots                | `16`        | No       | number or string    |\n| duration           | Duration of the animation       | `0.5`       | No       | number              |\n| color              | Color of the loader             | `#d20062`   | No       | string              |\n| iterationCount     | Number of animation iterations  | `infinite`  | No       | number or string    |\n| style              | CSS styles                      | `undefined` | No       | React.CSSProperties |\n| className          | CSS class name                  | `undefined` | No       | string              |\n| margin             | Margin between the dots         | `4`         | No       | number or string    |\n| dotsCount          | Number of dots in the loader    | `3`         | No       | number              |\n\n\u003c/details\u003e\n\n\n\u003cdetails\u003e\n\u003csummary\u003eBounceLoader\u003c/summary\u003e\n\n| Name               | Description                       | Default     | Required | Data Type           |\n|--------------------|-----------------------------------|-------------|----------|---------------------|\n| size               | Size of the loader                | `64`        | No       | number or string    |\n| duration           | Duration of the animation         | `2`         | No       | number              |\n| color              | Color of the loader               | `#d20062`   | No       | string              |\n| iterationCount     | Number of animation iterations    | `infinite`  | No       | number or string    |\n| style              | CSS styles                        | `undefined` | No       | React.CSSProperties |\n| className          | CSS class name                    | `undefined` | No       | string              |\n| isBorderOnly       | Whether the loader is border only | `false`     | No       | boolean             |\n| borderWidth        | Width of the border               | `2`         | No       | number              |\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003eCircleLoader\u003c/summary\u003e\n\n| Name               | Description                     | Default     | Required | Data Type           |\n|--------------------|---------------------------------|-------------|----------|---------------------|\n| size               | Size of the loader              | `112`       | No       | number or string    |\n| borderWidth        | Width of the border             | `1`         | No       | number              |\n| circleCount        | Number of circles in the loader | `5`         | No       | number              |\n| duration           | Duration of the animation       | `1`         | No       | number              |\n| color              | Color of the loader             | `#d20062`   | No       | string              |\n| iterationCount     | Number of animation iterations  | `infinite`  | No       | number or string    |\n| style              | CSS styles                      | `undefined` | No       | React.CSSProperties |\n| className          | CSS class name                  | `undefined` | No       | string              |\n| isCentered         | Whether the loader is centered  | `false`     | No       | boolean             |\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003eClimbingBoxLoader\u003c/summary\u003e\n\n| Name               | Description                     | Default     | Required | Data Type           |\n|--------------------|---------------------------------|-------------|----------|---------------------|\n| size               | Size of the loader              | `16`        | No       | number              |\n| duration           | Duration of the animation       | `2`         | No       | number              |\n| color              | Color of the loader             | `#d20062`   | No       | string              |\n| iterationCount     | Number of animation iterations  | `infinite`  | No       | number or string    |\n| style              | CSS styles                      | `undefined` | No       | React.CSSProperties |\n| className          | CSS class name                  | `undefined` | No       | string              |\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003eClipLoader\u003c/summary\u003e\n\n| Name               | Description                     | Default     | Required | Data Type           |\n|--------------------|---------------------------------|-------------|----------|---------------------|\n| size               | Size of the loader              | `32`        | No       | number              |\n| borderWidth        | Width of the border             | `2`         | No       | number              |\n| duration           | Duration of the animation       | `1`         | No       | number              |\n| color              | Color of the loader             | `#d20062`   | No       | string              |\n| iterationCount     | Number of animation iterations  | `infinite`  | No       | number or string    |\n| style              | CSS styles                      | `undefined` | No       | React.CSSProperties |\n| className          | CSS class name                  | `undefined` | No       | string              |\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003eGridLoader\u003c/summary\u003e\n\n| Name               | Description                     | Default             | Required | Data Type           |\n|--------------------|---------------------------------|---------------------|----------|---------------------|\n| dotsSize           | Size of the dots                | `16`                | No       | number or string    |\n| duration           | Duration of the animation       | `1`                 | No       | number              |\n| color              | Color of the loader             | `#d20062`           | No       | string              |\n| backgroundColor    | Background color of the loader  | `transparent`       | No       | string              |\n| iterationCount     | Number of animation iterations  | `infinite`          | No       | number or string    |\n| style              | CSS styles                      | `undefined`         | No       | React.CSSProperties |\n| className          | CSS class name                  | `undefined`         | No       | string              |\n| margin             | Margin between the dots         | `3`                 | No       | number or string    |\n| rows               | Number of rows in the grid      | `3`                 | No       | number              |\n| columns            | Number of columns in the grid   | `3`                 | No       | number              |\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003eWriter\u003c/summary\u003e\n\n| Name               | Description                     | Default             | Required | Data Type           |\n|--------------------|---------------------------------|---------------------|----------|---------------------|\n| text               | Text to be written              | `Hello`             | No       | string              |\n| fontSize           | Font size of the text           | `5rem`              | No       | number or string    |\n| fontFamily         | Font family of the text         | `Arial`             | No       | string              |\n| fontWeight         | Font weight of the text         | `600`               | No       | number or string    |\n| width              | Width of the loader             | `500`               | No       | number              |\n| height             | Height of the loader            | `200`               | No       | number              |\n| backgroundColor    | Background color of the loader  | `transparent`       | No       | string              |\n| duration           | Duration of the animation       | `3`                 | No       | number              |\n| iterationCount     | Number of animation iterations  | `infinite`          | No       | number or string    |\n| style              | CSS styles                      | `undefined`         | No       | React.CSSProperties |\n| className          | CSS class name                  | `undefined`         | No       | string              |\n\n_If you need change writer text color.add this line to your css file_\n\n```css\n --rms-writer-color: your color !important;\n```\n\n\u003c/details\u003e\n\n\n## License\n\n[![View License](https://img.shields.io/github/license/kavindu-mane/react-magic-spinners?color=success)](LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkavindu-mane%2Freact-magic-spinners","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkavindu-mane%2Freact-magic-spinners","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkavindu-mane%2Freact-magic-spinners/lists"}