Movatterモバイル変換


[0]ホーム

URL:


Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Sign up
Appearance settings

Zero dependency circular dashed progress bar component for React

NotificationsYou must be signed in to change notification settings

amit08255/circular-dashed-progress-react

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

9 Commits
 
 
 
 
 
 
 
 

Repository files navigation

This is zero dependency dashed circular progress bar component in React. It generates a dashed circular progress indicator using SVG.

Usage

Examples:

image

importCircularProgressBarfrom"./index";<CircularProgressBarselectedValue={8}/><CircularProgressBarselectedValue={25}maxValue={50}textColor='#f00'activeStrokeColor='#cc6600'withGradient/><CircularProgressBarselectedValue={75}maxValue={100}radius={100}activeStrokeColor='#0f4fff'withGradient/><CircularProgressBarselectedValue={55}maxValue={90}radius={80}activeStrokeColor='#cc6633'withGradientanticlockwise/>

Properties

PropDescriptionDefault
maxValueMax Value of theprogress.10
selectedValueSelected Value of theprogress.0
radiusRadius of the Circular Progress Bar.60
strokeWidthStroke Width of the progress.6
labelThis is any label that needs to be shown below the progress number.``
labelFontSizeFont Size for Label.#000
activeStrokeColorActive Stroke.#05a168
inactiveStrokeColorInactive Stroke Color.#ddd
backgroundColorBackground Color inside the progress circle.#fff
textColorColor of the Number Text, which shows the active number.#000
valueFontSizeFont Size of the number Text.``
withGradientWhether to apply gradient on the outer Progress bar.false
anticlockwiseWhether progress bar in Clockwise or not (default: Clockwise).false
initialAngularDisplacementAny initial Angular Displacement.0

About

Zero dependency circular dashed progress bar component for React

Topics

Resources

Stars

Watchers

Forks


[8]ページ先頭

©2009-2026 Movatter.jp