https://github.com/adexin/spinners-react
Lightweight SVG/CSS spinners for React
https://github.com/adexin/spinners-react
css loader loaders loading loading-spinner loading-spinners progress react react-components react-spinner react-spinners reactjs spinner spinner-react spinners spinners-react svg
Last synced: 24 days ago
JSON representation
Lightweight SVG/CSS spinners for React
- Host: GitHub
- URL: https://github.com/adexin/spinners-react
- Owner: adexin
- License: mit
- Created: 2020-02-12T13:05:47.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2025-04-27T15:50:28.000Z (about 1 month ago)
- Last Synced: 2025-04-27T15:52:27.180Z (about 1 month ago)
- 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
- Language: TypeScript
- Homepage: https://adexin.github.io/spinners/
- Size: 687 KB
- Stars: 437
- Watchers: 7
- Forks: 24
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE.md
Awesome Lists containing this project
README
# Spinners React
[](http://npm.im/spinners-react) [](https://github.com/adexin/spinners-react/blob/master/LICENSE.md) [](https://travis-ci.com/github/adexin/spinners-react) [](https://coveralls.io/github/adexin/spinners-react?branch=master) [](https://unpkg.com/spinners-react/lib/umd/index.min.js)
9 awesome typescript-aware lightweight spinners built as react.js components.
## Demo
[View demo](https://adexin.github.io/spinners/) with examples of react.js component usage.
## Getting started
### Installation
```
$ npm install spinners-react
```
**or** [add it directly to HTML page](#UMD-bundle-usage)
### Usage
```
import { SpinnerCircular } from 'spinners-react';
```
### Hide spinner
```
```
### List of components
| Component | Example | Component | Example | Component | Example |
|-----------|---------|-----------|---------|-----------|---------|
|`SpinnerCircular`|
|`SpinnerCircularFixed`| 
|`SpinnerCircularSplit`| 
|
|`SpinnerRound` |
|`SpinnerRoundOutlined`|
|`SpinnerRoundFilled` |
|
|`SpinnerDotted` |
|`SpinnerInfinity` |
|`SpinnerDiamond` |
|
## Properties
The following optional properties are available. All extra props will be passed to the component's root SVG element.
| Property | Default value | Type | Description |
|--------------|--------------------|----------------|-------------|
|size |`50` |number or string|Set the size as number of pixels or any valid CSS string (e.g. `size="100%"`).|
|thickness |`100` |number |Set lines width as a percentage of default thickness.|
|сolor |`'#38ad48'` |string |Set the color. Can be set to any valid CSS string (hex, rgb, rgba).|
|secondaryColor|`'rgba(0,0,0,0.44)'`|string |Set the secondary color. Can be set to any valid CSS string (hex, rgb, rgba).|
|speed |`100` |number |Set the animation speed as a percentage of default speed.|
|enabled |`true` |boolean |Show/Hide the spinner.|
|still |`false` |boolean |Disable/Enable spinner animation.|
|style |undefined |object |Pass CSS styles to the root SVG element|
## Server Side Rendering
While 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:
```
/* App.css */
/* to load animation for a specific spinner */
@import "~spinners-react/lib/SpinnerCircular.css";
/* to load animations for all spinners at once */
@import "~spinners-react/lib/index.css";
```
## Minimizing Bundle Size
The 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.
If you're using ES6 modules and a bundler that supports tree-shaking you can safely use named imports:
```
import { SpinnerCircular } from 'spinners-react';
```
If that's not the case you're able to use path imports to avoid pulling in unused spinners:
```
// ESM
import { SpinnerCircular } from 'spinners-react/lib/esm/SpinnerCircular';
// or CJS
const { SpinnerCircular } = require('spinners-react/lib/cjs/SpinnerCircular');
// or UMD
const { SpinnerCircular } = require('spinners-react/lib/umd/SpinnerCircular');
```
## UMD bundle usage
```
ReactDOM.render(
React.createElement(SpinnersReact.SpinnerCircular),
document.getElementById('root')
);
```
## Browsers support
| [
](http://godban.github.io/browsers-support-badges/)
Firefox | [
](http://godban.github.io/browsers-support-badges/)
Chrome | [
](http://godban.github.io/browsers-support-badges/)
Safari | [
](http://godban.github.io/browsers-support-badges/)
Opera | [
](http://godban.github.io/browsers-support-badges/)
Edge |
| --------- | --------- | --------- | --------- | --------- |
| last 2 versions| last 2 versions| last 2 versions| last 2 versions| last 2 versions*
**\*** - Legacy EdgeHTML Edge (i.e. 42-44) is also supported except for `SpinnerRound` and `SpinnerRoundOutlined`.
## Issues and Bugs
Let us know if you [found a bug](https://github.com/adexin/spinners-react/issues)!
## Spinners for other frameworks
- [spinners-angular](https://github.com/adexin/spinners-angular)
## Support and Contact
Have a quick question or need some help? Please do not hesitate to contact us via email at [email protected].
## Credits
This component is developed by consulting agency [Adexin](https://adexin.com/).
## License
Spinners 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.