Gathering detailed insights and metrics for spinners-react
Gathering detailed insights and metrics for spinners-react
Installations
npm install spinners-reactDeveloper Guide
BETA
Typescript
Yes
Module System
ESM
Node Version
18.17.1
NPM Version
9.6.7
Releases
Unable to fetch releases
Languages
3
TypeScript
JavaScript
CSS
TypeScript (85.22%)
JavaScript (9.88%)
CSS (4.91%)
Developer
Download Statistics
Total Downloads
0
Last Day
0
Last Week
0
Last Month
0
Last Year
0
GitHub Statistics
MIT License
444 Stars
73 Commits
24 Forks
7 Watchers
1 Branches
4 Contributors
Updated on Jul 13, 2025
Maintainers
1
Package Meta Information
Latest Version
1.0.11
Package Id
spinners-react@1.0.11
Unpacked Size
955.06 kB
Size
98.45 kB
File Count
249
NPM Version
9.6.7
Node Version
18.17.1
Published on
Apr 27, 2025
Total Downloads
Cumulative downloads
Total Downloads
NaN
Last Day
0%
NaN
Compared to previous day
Last Week
0%
NaN
Compared to previous week
Last Month
0%
NaN
Compared to previous month
Last Year
0%
NaN
Compared to previous year
Weekly Downloads
Monthly Downloads
Yearly Downloads
Peer Dependencies
4
Dev Dependencies
35
@rollup/plugin-commonjs@rollup/plugin-node-resolve@rollup/plugin-terser@rollup/plugin-typescript@testing-library/jest-dom@testing-library/react@types/jest@typescript-eslint/eslint-plugin@typescript-eslint/parsercoverallseslinteslint-config-airbnbeslint-config-airbnb-typescripteslint-import-resolver-typescripteslint-plugin-importeslint-plugin-jsx-a11yeslint-plugin-reacteslint-plugin-react-hooksglobjestjest-environment-jsdomreactreact-domrolluprollup-plugin-copy-globrollup-plugin-deleterollup-plugin-postcsssource-map-loaderstyle-injectstyle-loaderts-jestts-loaderts-nodetslibtypescript
Spinners React
9 awesome typescript-aware lightweight spinners built as react.js components.
Demo
View demo with examples of react.js component usage.
Getting started
Installation
$ npm install spinners-react
or add it directly to HTML page
Usage
import { SpinnerCircular } from 'spinners-react';
<SpinnerCircular />
Hide spinner
<SpinnerCircular enabled={false} />
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
<!doctype html>
<html>
<head>
<script src="https://unpkg.com/react@19/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@19/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>
Browsers support
 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.
Issues and Bugs
Let us know if you found a bug!
Spinners for other frameworks
Support and Contact
Have a quick question or need some help? Please do not hesitate to contact us via email at info@adexin.com.
Credits
This component is developed by consulting agency Adexin.
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.
No vulnerabilities found.
Reason
no binaries found in the repo
Reason
license file detected
Details
- Info: project has a license file: LICENSE.md:0
- Info: FSF or OSI recognized license: MIT License: LICENSE.md:0
Reason
Found 2/6 approved changesets -- score normalized to 3
Reason
7 existing vulnerabilities detected
Details
- Warn: Project is vulnerable to: GHSA-968p-4wvh-cqc8
- Warn: Project is vulnerable to: GHSA-v6h2-p8h4-qcjw
- Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275
- Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv
- Warn: Project is vulnerable to: GHSA-mwcw-c2x4-8c55
- Warn: Project is vulnerable to: GHSA-p8p7-x288-28g6
- Warn: Project is vulnerable to: GHSA-72xf-g2v4-qvf3
Reason
1 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
project is not fuzzed
Details
- Warn: no fuzzer integrations found
Reason
security policy file not detected
Details
- Warn: no security policy file detected
- Warn: no security file to analyze
- Warn: no security file to analyze
- Warn: no security file to analyze
Reason
branch protection not enabled on development/release branches
Details
- Warn: branch protection not enabled for branch 'master'
Reason
SAST tool is not run on all commits -- score normalized to 0
Details
- Warn: 0 commits out of 26 are checked with a SAST tool
Score
2.5
/10
Last Scanned on 2025-07-07
The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.
Learn More