
Research
Security News
The Growing Risk of Malicious Browser Extensions
Socket researchers uncover how browser extensions in trusted stores are used to hijack sessions, redirect traffic, and manipulate user behavior.
react-circle-progress-bar
Advanced tools
A circular progress bar with gradient colors for React
Supply Chain Security
Vulnerability
Quality
Maintenance
License
A circular progress bar with gradient colors for React
npm install react-circle-progress-bar
import Progress from 'react-circle-progress-bar'
<Progress progress={75} />
Property | default | information |
---|---|---|
progress | 0 | Value of the progress bar. This can range from 0 - 100 |
strokeWidth | 4 | Width of the bar |
ballStrokeWidth | 16 | Width of the ball |
reduction | 0.25 | Percentage of the circle that is removed. Set to 0 o have a closed circle. Default uses 3/4 of the circle (75%) so .25 reduction |
transitionDuration | 0.5 | Duration of transition between old and new progress value in seconds |
transitionTimingFunction | ease | Function for the transition between the old and new progress value. Any css transition function can be used |
background | #dde2e9 (light grey) | Color of the empty part of the progress bar |
hideBall | false | Indicates whether the ball at the furthest point of the progress bar is hidden |
hideValue | false | Indicates wheter the text value of the progress bar should be hidden |
subtitle | "" | Text displayed below the percentage text value of the progress bar |
style | undefined | Sets the style on the wrapper component |
className | undefined | Sets the className on the wrapper component |
gradient | [{stop: 0.0, color: '#00bc9b'}, {stop: 1, color: '#5eaefd'}] | An array of objects, declaring the gradient color of the progress bar. Use 'stop' as percentage, and 'color' as color to declare a gradient. |
FAQs
A circular progress bar with gradient colors for React
The npm package react-circle-progress-bar receives a total of 648 weekly downloads. As such, react-circle-progress-bar popularity was classified as not popular.
We found that react-circle-progress-bar demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer 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.
Research
Security News
Socket researchers uncover how browser extensions in trusted stores are used to hijack sessions, redirect traffic, and manipulate user behavior.
Research
Security News
An in-depth analysis of credential stealers, crypto drainers, cryptojackers, and clipboard hijackers abusing open source package registries to compromise Web3 development environments.
Security News
pnpm 10.12.1 introduces a global virtual store for faster installs and new options for managing dependencies with version catalogs.