Menu


Controls

ProgressCircle

Storybook

The ProgressCircle component is a useful tool for visually displaying the progress of a task or process. This component creates a circular animation indicating the percentage completion of a task, providing clear visual feedback to the user. The appearance of the ProgressCircle component is easily customizable, allowing you to tailor it to the needs of your application. In addition, its integration is simple and significantly improves the user experience in your web or mobile applications. With the ProgressCircle component, you can make tracking the progress of a task simple and intuitive for users.



Imports
1import { ProgressCircle } from 'dd360-ds'

Usage

Use the ProgressCircle component as shown below:

20%
Complete

The code snippet below shows how to use the ProgressCircle component:

1import { ProgressCircle, Text } from 'dd360-ds'
2  
3<ProgressCircle value={20} width={90} classNamePercentage="w-full text-center text-sm" children={<Text variant="small">Complete</Text>}  />
4

ColorComplete

With the prop colorComplete you can customize the color when the progress is complete

100%
Complete
1import { ProgressCircle, Text} from 'dd360-ds'
2    
3  <ProgressCircle value={100} width={90} colorComplete="#7400ff" classNamePercentage="w-full text-center text-sm" children={<Text variant="small">Complete</Text>} />
4

ColorProgress

With the prop colorProgress you can customize the progress color

50%
Complete
1import { ProgressCircle, Text } from 'dd360-ds'
2
3<ProgressCircle
4    value={50}
5    width={90}
6    colorProgress="#ffba2b"
7    classNamePercentage="w-full text-center text-sm"
8    children={<Text variant="small">Complete</Text>}
9/>
10

ColorBackground

With the prop colorBackground you can customize the color of the progress that is not complete

50%
Complete
1import { ProgressCircle } from 'dd360-ds'
2
3<ProgressCircle
4    value={50}
5    width={90}
6    colorBackground="#aabfda"
7    classNamePercentage="w-full text-center text-sm"
8    children={<Text variant="small">Complete</Text>}
9/>
10

StrokeWidth

With the prop strokeWidth you can customize the thickness of the progress

50%
Complete
1import { ProgressCircle, Text } from 'dd360-ds'
2
3<ProgressCircle value={50} width={90} strokeWidth={5} classNamePercentage="w-full text-center text-sm" children={<Text variant="small">Complete</Text>} />
4


API Reference
NameTypesDefault
"value"
number
100
"colorComplete"
string
#34D399
"colorProgress"
string
#1D4ED8
"colorBackground"
string
#DBEAFE
"strokeWidth"
number
11
"classNamePercentage"
string
w-full text-center text-3xl
"width"
number
200
"children"
ReactNode
<p>Completado</p>
ProgressbarSpinner