Gathering detailed insights and metrics for react-customizable-progressbar
Gathering detailed insights and metrics for react-customizable-progressbar
Customizable circular progress bar component for React 🍩
Installations
npm install react-customizable-progressbarDeveloper Guide
BETA
Typescript
Yes
Module System
CommonJS
Node Version
22.9.0
NPM Version
10.8.3
Releases
12
Languages
2
TypeScript
JavaScript
TypeScript (94.54%)
JavaScript (5.46%)
Developer
Download Statistics
Total Downloads
0
Last Day
0
Last Week
0
Last Month
0
Last Year
0
GitHub Statistics
MIT License
65 Stars
134 Commits
21 Forks
1 Watchers
1 Branches
4 Contributors
Updated on Jul 09, 2025
Maintainers
1
Package Meta Information
Latest Version
2.1.1
Package Id
react-customizable-progressbar@2.1.1
Unpacked Size
49.05 kB
Size
14.24 kB
File Count
6
NPM Version
10.8.3
Node Version
22.9.0
Published on
Jul 09, 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
Dev Dependencies
21
react-customizable-progressbar
Customizable circular SVG progress bar component for React
Check examples or generator to play around with all props
Installation
1npm install --save react-customizable-progressbar
or
1yarn add react-customizable-progressbar
Usage
1import ProgressBar from 'react-customizable-progressbar'; 2 3<ProgressBar progress={60} radius={100} />;
Props
| Name | Type | Default | Description |
|---|---|---|---|
radius (required) | number | 100 | Progress bar radius |
progress (required) | number | 0 | Progress value (out of steps) |
steps | number | 100 | Total steps |
cut | number | 0 | Angle of the circle sector |
rotate | number | -90 | Progress rotation |
strokeWidth | number | 20 | Stroke width |
strokeColor | string | 'indianred' | Stroke color |
strokeLinecap | string | 'round' | Stroke line cap |
transition | string | '0.3s ease' | Transition |
trackStrokeWidth | number | 20 | Track stroke width |
trackStrokeColor | string | '#e6e6e6' | Track stroke color |
trackStrokeLinecap | string | 'round' | Track stroke line cap |
trackTransition | string | '1s ease' | Track transition |
pointerRadius | number | 0 | Pointer radius |
pointerStrokeWidth | number | 20 | Pointer stroke width |
pointerStrokeColor | string | 'indianred' | Pointer stroke color |
pointerFillColor | string | 'white' | Pointer fill color |
initialAnimation | bool | false | Initial animation |
initialAnimationDelay | number | 0 | Initial animation delay |
inverse | bool | false | Inverse |
counterClockwise | bool | false | Counter-clockwise |
children | node | null | Children - pass anything to show inside progress bar |
className | string | '' | Progress bar class name |
Styles
1.RCP { 2} 3.RCP__track { 4} 5.RCP__progress { 6} 7.RCP__pointer { 8}
You can use these default indicator styles to center it both horizontally and vertically:
1.your-indicator { 2 display: flex; 3 justify-content: center; 4 text-align: center; 5 position: absolute; 6 top: 0; 7 width: 100%; 8 height: 100%; 9 margin: 0 auto; 10 user-select: none; 11}
Run examples locally
1npm install 2npm run dev
No vulnerabilities found.
Reason
no binaries found in the repo
Reason
license file detected
Details
- Info: project has a license file: LICENSE:0
- Info: FSF or OSI recognized license: MIT License: LICENSE:0
Reason
9 commit(s) and 1 issue activity found in the last 90 days -- score normalized to 8
Reason
2 existing vulnerabilities detected
Details
- Warn: Project is vulnerable to: GHSA-v6h2-p8h4-qcjw
- Warn: Project is vulnerable to: GHSA-67mh-4wv8-2f99
Reason
Found 4/13 approved changesets -- score normalized to 3
Reason
no effort to earn an OpenSSF best practices badge detected
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
project is not fuzzed
Details
- Warn: no fuzzer integrations found
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
4.2
/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