Controls

Progressbar

Storybook

The ProgressBar component allows you to display the progress of a task or process in real time. The progress bar is a visual tool that indicates the percentage of completion of a task, giving the user instant feedback on the progress of the process. The ProgressBar component is highly customizable, allowing you to tailor it to the specific needs of your application. In addition, it is easy to use and its implementation significantly improves the user experience in your web or mobile applications. With the ProgressBar component, you can make tracking the progress of a task simple and clear to users.

Imports

The first alternative is recommended since they can reduce the application bundle

1import Progressbar from 'dd360-ds/Progressbar'

1import { Progressbar } from 'dd360-ds'

Usage

Use the Progressbar component as shown below:

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

1import  Progressbar from 'dd360-ds/Progressbar'
2  
3<ProgressBar value={20} height="10px" />
4

BackgroundColor

With the prop backgroundColor you can customize the color of the bar

1import  Progressbar from 'dd360-ds/Progressbar'
2    
3<ProgressBar backgroundColor="#93e78e" value={40} height="10px" />
4

Label

With the prop label you can add a text bar

1import  Progressbar from 'dd360-ds/Progressbar'
2
3<ProgressBar label="Loading..." value={60} height="20px" />
4

Animated

With the prop animated you can add an animation to the bar

1import  Progressbar from 'dd360-ds/Progressbar'
2
3<ProgressBar animated value={80} height="10px" />
4

BgColorContainer

With the prop animated you can modify the color of the container of the bar

1import  Progressbar from 'dd360-ds/Progressbar'
2
3<ProgressBar backgroundColor="#ff4e4e" bgColorContainer="#fff" value={50} height="10px" />
4

API Reference