React Design System: component Progress Bar

Progress Bar

Progress bars indicate progress towards the completion of a task or an indeterminate loading state.

Overview

API

Code

Component 'ProgressBar'

First, you need to import a component to your code (сheck component path is right):

import ProgressBar from "../../core/ProgressBar";

To use the component, copy and paste an example from the CODE tab.
Default props of component can be omitted, they are applied automatically. For example, you can skip the prop type='def', because 'def' is the default value of prop 'type'.

type

string = def

This prop set the shape of the component. Possible states: def . The default state is def.

view

string = filled

This prop set the view of the component. Possible states: filled . The default state is filled.

color

string = default

className

string

A space-delimited list of class names to pass along to a child element.

animate

boolean = true

Whether the background should animate.

stripes

boolean = true

Whether the background should be striped.

value

number

A value between 0 and 1 (inclusive) representing how far along the operation is. Values below 0 or above 1 will be interpreted as 0 or 1, respectively. Omitting this prop will result in an "indeterminate" progress meter that fills the entire bar.