{"id":26775502,"url":"https://github.com/adexin/spinners-react","last_synced_at":"2025-05-16T08:03:33.100Z","repository":{"id":40988949,"uuid":"240014786","full_name":"adexin/spinners-react","owner":"adexin","description":"Lightweight SVG/CSS spinners for React","archived":false,"fork":false,"pushed_at":"2025-04-27T15:50:28.000Z","size":703,"stargazers_count":437,"open_issues_count":3,"forks_count":24,"subscribers_count":7,"default_branch":"master","last_synced_at":"2025-04-27T15:52:27.180Z","etag":null,"topics":["css","loader","loaders","loading","loading-spinner","loading-spinners","progress","react","react-components","react-spinner","react-spinners","reactjs","spinner","spinner-react","spinners","spinners-react","svg"],"latest_commit_sha":null,"homepage":"https://adexin.github.io/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/adexin.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE.md","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,"zenodo":null}},"created_at":"2020-02-12T13:05:47.000Z","updated_at":"2025-04-27T15:50:31.000Z","dependencies_parsed_at":"2024-06-18T13:34:09.403Z","dependency_job_id":"1ad9ac6c-a40a-421f-bc0d-d135427e5e35","html_url":"https://github.com/adexin/spinners-react","commit_stats":null,"previous_names":[],"tags_count":12,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/adexin%2Fspinners-react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/adexin%2Fspinners-react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/adexin%2Fspinners-react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/adexin%2Fspinners-react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/adexin","download_url":"https://codeload.github.com/adexin/spinners-react/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254493381,"owners_count":22080126,"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":["css","loader","loaders","loading","loading-spinner","loading-spinners","progress","react","react-components","react-spinner","react-spinners","reactjs","spinner","spinner-react","spinners","spinners-react","svg"],"created_at":"2025-03-29T03:18:36.508Z","updated_at":"2025-05-16T08:03:33.092Z","avatar_url":"https://github.com/adexin.png","language":"TypeScript","readme":"# Spinners React\n[![npm](https://img.shields.io/npm/v/spinners-react.svg)](http://npm.im/spinners-react) [![License](https://img.shields.io/github/license/adexin/spinners-react.svg)](https://github.com/adexin/spinners-react/blob/master/LICENSE.md) [![Build Status](https://img.shields.io/travis/com/adexin/spinners-react/master.svg)](https://travis-ci.com/github/adexin/spinners-react) [![Coverage Status](https://coveralls.io/repos/github/adexin/spinners-react/badge.svg?branch=master)](https://coveralls.io/github/adexin/spinners-react?branch=master) [![gzip size](https://img.badgesize.io/https://unpkg.com/spinners-react/lib/umd/index.min.js?compression=gzip\u0026label=gzip)](https://unpkg.com/spinners-react/lib/umd/index.min.js)\n\n\n9 awesome typescript-aware lightweight spinners built as react.js components.\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"http://adexin.github.io/spinners\"\u003e\n    \u003cimg src=\"https://i.imgur.com/xa7eWLW.gif\" /\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n## Demo\n[View demo](https://adexin.github.io/spinners/) with examples of react.js component usage.\n\n## Getting started\n### Installation\n```\n$ npm install spinners-react\n```\n**or** [add it directly to HTML page](#UMD-bundle-usage)\n\n### Usage\n```\nimport { SpinnerCircular } from 'spinners-react';\n\n\u003cSpinnerCircular /\u003e\n```\n\n### Hide spinner\n```\n\u003cSpinnerCircular enabled={false} /\u003e\n```\n\n### List of components\n\n| Component | Example | Component | Example | Component | Example |\n|-----------|---------|-----------|---------|-----------|---------|\n|`SpinnerCircular`|\u003cimg width=\"70\" src=\"https://i.imgur.com/o89jDAP.gif\" /\u003e|`SpinnerCircularFixed`| \u003cimg width=\"70\" src=\"https://i.imgur.com/tTAGJCm.gif\" /\u003e|`SpinnerCircularSplit`| \u003cimg width=\"70\" src=\"https://i.imgur.com/bnmc9Ww.gif\" /\u003e|\n|`SpinnerRound`   |\u003cimg width=\"70\" src=\"https://i.imgur.com/ankNNb4.gif\" /\u003e|`SpinnerRoundOutlined`|\u003cimg width=\"70\" src=\"https://i.imgur.com/EGAQ1zI.gif\" /\u003e |`SpinnerRoundFilled`  |\u003cimg width=\"70\" src=\"https://i.imgur.com/izh0T8z.gif\" /\u003e|\n|`SpinnerDotted`  |\u003cimg width=\"70\" src=\"https://i.imgur.com/PRsEM0Y.gif\" /\u003e|`SpinnerInfinity`     |\u003cimg width=\"70\" src=\"https://i.imgur.com/gdvE3yw.gif\" /\u003e |`SpinnerDiamond`      |\u003cimg width=\"70\" src=\"https://i.imgur.com/P2lUfRy.gif\" /\u003e|\n\n## Properties\nThe following optional properties are available. All extra props will be passed to the component's root SVG element.\n\n| Property     | Default value      | Type           | Description |\n|--------------|--------------------|----------------|-------------|\n|size          |`50`                |number or string|Set the size as number of pixels or any valid CSS string (e.g. `size=\"100%\"`).|\n|thickness     |`100`               |number          |Set lines width as a percentage of default thickness.|\n|сolor         |`'#38ad48'`         |string          |Set the color. Can be set to any valid CSS string (hex, rgb, rgba).|\n|secondaryColor|`'rgba(0,0,0,0.44)'`|string          |Set the secondary color. Can be set to any valid CSS string (hex, rgb, rgba).|\n|speed         |`100`               |number          |Set the animation speed as a percentage of default speed.|\n|enabled       |`true`              |boolean         |Show/Hide the spinner.|\n|still         |`false`             |boolean         |Disable/Enable spinner animation.|\n|style         |undefined           |object          |Pass CSS styles to the root SVG element|\n\n## Server Side Rendering\nWhile the library works with SSR, the spinner's animation CSS will be attached to the head only on the ```hydrate``` phase, which means the spinners will start animating only after the page is fully loaded. To work around this, include the needed css in your bundle.css manually:\n```\n/* App.css */\n\n/* to load animation for a specific spinner */\n@import \"~spinners-react/lib/SpinnerCircular.css\";\n\n/* to load animations for all spinners at once */\n@import \"~spinners-react/lib/index.css\";\n```\n\n## Minimizing Bundle Size\nThe library is thin and do not rely on any style library / runtime to be used. To reduce the bundle size even more load only the used components.\nIf you're using ES6 modules and a bundler that supports tree-shaking you can safely use named imports:\n```\nimport { SpinnerCircular } from 'spinners-react';\n```\nIf that's not the case you're able to use path imports to avoid pulling in unused spinners:\n```\n// ESM\nimport { SpinnerCircular } from 'spinners-react/lib/esm/SpinnerCircular';\n// or CJS\nconst { SpinnerCircular } = require('spinners-react/lib/cjs/SpinnerCircular');\n// or UMD\nconst { SpinnerCircular } = require('spinners-react/lib/umd/SpinnerCircular');\n\n```\n\n## UMD bundle usage\n```\n\u003c!doctype html\u003e\n\u003chtml\u003e\n  \u003chead\u003e\n    \u003cscript src=\"https://unpkg.com/react@19/umd/react.production.min.js\"\u003e\u003c/script\u003e\n    \u003cscript src=\"https://unpkg.com/react-dom@19/umd/react-dom.production.min.js\"\u003e\u003c/script\u003e\n    \u003c!-- to load a specific spinner --\u003e\n    \u003cscript src=\"https://unpkg.com/spinners-react/lib/umd/SpinnerCircular.min.js\"\u003e\u003c/script\u003e\n    \u003c!-- to load all spinners at once --\u003e\n    \u003cscript src=\"https://unpkg.com/spinners-react/lib/umd/index.min.js\"\u003e\u003c/script\u003e\n  \u003c/head\u003e\n\n  \u003cbody\u003e\n    \u003cdiv id=\"root\"\u003e\u003c/div\u003e\n    \u003cscript\u003e\n      ReactDOM.render(\n        React.createElement(SpinnersReact.SpinnerCircular),\n        document.getElementById('root')\n      );\n    \u003c/script\u003e\n  \u003c/body\u003e\n\u003c/html\u003e\n```\n\n## Browsers support\n\n| [\u003cimg src=\"https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png\" alt=\"Firefox\" width=\"24px\" height=\"24px\" /\u003e](http://godban.github.io/browsers-support-badges/)\u003cbr\u003eFirefox | [\u003cimg src=\"https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png\" alt=\"Chrome\" width=\"24px\" height=\"24px\" /\u003e](http://godban.github.io/browsers-support-badges/)\u003cbr\u003eChrome | [\u003cimg src=\"https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png\" alt=\"Safari\" width=\"24px\" height=\"24px\" /\u003e](http://godban.github.io/browsers-support-badges/)\u003cbr\u003eSafari | [\u003cimg src=\"https://raw.githubusercontent.com/alrra/browser-logos/master/src/opera/opera_48x48.png\" alt=\"Opera\" width=\"24px\" height=\"24px\" /\u003e](http://godban.github.io/browsers-support-badges/)\u003cbr\u003eOpera | [\u003cimg src=\"https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png\" alt=\"IE / Edge\" width=\"24px\" height=\"24px\" /\u003e](http://godban.github.io/browsers-support-badges/)\u003cbr\u003e Edge |\n| --------- | --------- | --------- | --------- | --------- |\n| last 2 versions| last 2 versions| last 2 versions| last 2 versions| last 2 versions*\n\n**\\*** - Legacy EdgeHTML Edge (i.e. 42-44) is also supported except for `SpinnerRound` and `SpinnerRoundOutlined`.\n\n## Issues and Bugs\n\nLet us know if you [found a bug](https://github.com/adexin/spinners-react/issues)!\n\n## Spinners for other frameworks\n\n- [spinners-angular](https://github.com/adexin/spinners-angular)\n\n## Support and Contact\n\nHave a quick question or need some help? Please do not hesitate to contact us via email at info@adexin.com.\n\n## Credits\n\nThis component is developed by consulting agency [Adexin](https://adexin.com/).\n\n## License\n\nSpinners React is released under MIT license. You are free to use, modify and distribute this software, as long as the copyright header is left intact.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fadexin%2Fspinners-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fadexin%2Fspinners-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fadexin%2Fspinners-react/lists"}