Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

react-customizable-progressbar

Package Overview
Dependencies
Maintainers
0
Versions
34
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-customizable-progressbar

Customizable circular SVG progress bar component for React

  • 2.0.1
  • latest
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
3.2K
decreased by-20.29%
Maintainers
0
Weekly downloads
 
Created
Source

react-customizable-progressbar

Customizable circular SVG progress bar component for React



Check examples or generator to play around with all props

Installation

npm install --save react-customizable-progressbar

or

yarn add react-customizable-progressbar

Usage

import ProgressBar from 'react-customizable-progressbar';

<ProgressBar progress={60} radius={100} />;

Props

NameTypeDefaultDescription
radius (required)number100Progress bar radius
progress (required)number0Progress value (out of steps)
stepsnumber100Total steps
cutnumber0Angle of the circle sector
rotatenumber-90Progress rotation
strokeWidthnumber20Stroke width
strokeColorstring'indianred'Stroke color
strokeLinecapstring'round'Stroke line cap
transitionstring'0.3s ease'Transition
trackStrokeWidthnumber20Track stroke width
trackStrokeColorstring'#e6e6e6'Track stroke color
trackStrokeLinecapstring'round'Track stroke line cap
trackTransitionstring'1s ease'Track transition
pointerRadiusnumber0Pointer radius
pointerStrokeWidthnumber20Pointer stroke width
pointerStrokeColorstring'indianred'Pointer stroke color
pointerFillColorstring'white'Pointer fill color
initialAnimationboolfalseInitial animation
initialAnimationDelaynumber0Initial animation delay
inverseboolfalseInverse
counterClockwiseboolfalseCounter-clockwise
childrennodenullChildren - pass anything to show inside progress bar
classNamestring''Progress bar class name

Styles

.RCP {
}
.RCP__track {
}
.RCP__progress {
}
.RCP__pointer {
}

You can use these default indicator styles to center it both horizontally and vertically:

.your-indicator {
  display: flex;
  justify-content: center;
  text-align: center;
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  margin: 0 auto;
  user-select: none;
}

Run examples locally

npm install
npm run dev

Keywords

FAQs

Package last updated on 26 Oct 2024

Did you know?

Socket

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.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc