spinners-react
Advanced tools
9 awesome typescript-aware lightweight spinners built as react.js components.
View demo with examples of react.js component usage.
$ npm install spinners-react
or add it directly to HTML page
import { SpinnerCircular } from 'spinners-react';
<SpinnerCircular />
<SpinnerCircular enabled={false} />
| Component | Example | Component | Example | Component | Example |
|---|---|---|---|---|---|
SpinnerCircular |  | SpinnerCircularFixed |  | SpinnerCircularSplit |  |
SpinnerRound |  | SpinnerRoundOutlined |  | SpinnerRoundFilled |  |
SpinnerDotted |  | SpinnerInfinity |  | SpinnerRomb |  |
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). |
| 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 |
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 spinner at once */
@import "~spinners-react/lib/index.css";
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';
It 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
import { SpinnerCircular } from 'spinners-react/lib/cjs/SpinnerCircular';
// or UMD
import { SpinnerCircular } from 'spinners-react/lib/umd/SpinnerCircular';
<!doctype html>
<html>
<head>
<script src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
<!-- to load a specific spinner -->
<script src="https://unpkg.com/spinners-react/lib/umd/SpinnerCircular.min.js"></script>
<!-- to load all spinners at once -->
<script src="https://unpkg.com/spinners-react/lib/umd/index.min.js"></script>
</head>
<body>
<div id="root"></div>
<script>
ReactDOM.render(
React.createElement(SpinnersReact.SpinnerCircular),
document.getElementById('root')
);
</script>
</body>
</html>
 Firefox |  Chrome |  Safari |  Opera |  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.
Let us know if you found a bug!
Have a quick question or need some help? Please do not hesitate to contact us via email at info@adexin.com.
This component is developed by consulting agency Adexin.
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.
[1.0.2]
FAQs
Lightweight SVG/CSS spinners for React
The npm package spinners-react receives a total of 11,612 weekly downloads. As such, spinners-react popularity was classified as popular.
We found that spinners-react demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Socket's package search now displays weekly downloads for npm packages, helping developers quickly assess popularity and make more informed decisions.
Security News
A Stanford study reveals 9.5% of engineers contribute almost nothing, costing tech $90B annually, with remote work fueling the rise of "ghost engineers."
Research
Security News
Socket’s threat research team has detected six malicious npm packages typosquatting popular libraries to insert SSH backdoors.