![](\"https://i.imgur.com/xa7eWLW.gif\")
\n \n\n \n \n \n
![](\"https://i.imgur.com/o89jDAP.gif\")
|`SpinnerCircularFixed`| ![](\"https://i.imgur.com/tTAGJCm.gif\")
|`SpinnerCircularSplit`| ![](\"https://i.imgur.com/bnmc9Ww.gif\")
|\n|`SpinnerRound` |![](\"https://i.imgur.com/ankNNb4.gif\")
|`SpinnerRoundOutlined`|![](\"https://i.imgur.com/EGAQ1zI.gif\")
|`SpinnerRoundFilled` |![](\"https://i.imgur.com/izh0T8z.gif\")
|\n|`SpinnerDotted` |![](\"https://i.imgur.com/PRsEM0Y.gif\")
|`SpinnerInfinity` |![](\"https://i.imgur.com/gdvE3yw.gif\")
|`SpinnerDiamond` |![](\"https://i.imgur.com/P2lUfRy.gif\")
|\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\n\n \n \n \n \n \n \n \n \n\n \n \n \n \n\n```\n\n## Browsers support\n\n| [![\"Firefox\"](\"https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png\")
](http://godban.github.io/browsers-support-badges/)![\"Chrome\"](\"https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png\")
](http://godban.github.io/browsers-support-badges/)![\"Safari\"](\"https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png\")
](http://godban.github.io/browsers-support-badges/)![\"Opera\"](\"https://raw.githubusercontent.com/alrra/browser-logos/master/src/opera/opera_48x48.png\")
](http://godban.github.io/browsers-support-badges/)![\"IE](\"https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png\")
](http://godban.github.io/browsers-support-badges/)