@commercetools-uikit/progress-bar v19.13.0
ProgressBar
Description
A progress bar component used to visualize the progression of an extended operation
Installation
yarn add @commercetools-uikit/progress-bar
npm --save install @commercetools-uikit/progress-bar
Additionally install the peer dependencies (if not present)
yarn add react
npm --save install react
Usage
import ProgressBar from '@commercetools-uikit/progress-bar';
const Example = () => <ProgressBar label={`${50}% completed`} progress={50} />;
export default Example;
Properties
Props | Type | Required | Default | Description |
---|---|---|---|---|
progress | number | 0 | The percentage of the task completion to fill the bar. | |
label | union Possible values:, string, ReactElement, (MessageDescriptor & { values?: Record<string, ReactNode> }), null | null | The text to display alongside the bar. | |
labelPosition | union Possible values:'top' , 'bottom' , 'left' , 'right' | 'top' | Location of the text in relation to the bar. | |
labelWidth | union Possible values:, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 'scale', 'auto' | 'scale' | The scale of the width for the label, uses values available in the Constraints.Horizontal component. | |
isInverted | boolean | false | Specifies the use of light colors(default) or dark colors. | |
isAnimated | boolean | true | Specifies whether the inner bar should have the styles animated. | |
height | union Possible values:'10' , '20' | '20' | The scale of the height for the bar, also affects the styles of the label. | |
barWidth | union Possible values:4 , 5 , 6 , 7 , 8 , 9 , 10 , 11 , 12 , 13 , 14 , 15 , 16 , 'scale' | 6 | The scale of the width for the label, uses values available in the Constraints.Horizontal component. |
8 months ago
8 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
11 months ago
1 year ago
1 year ago
12 months ago
11 months ago
1 year ago
11 months ago
1 year ago
12 months ago
1 year ago
1 year ago
1 year ago
12 months ago
11 months ago
12 months ago
1 year ago
12 months ago
1 year ago
1 year ago
12 months ago
1 year ago
1 year ago
1 year ago
11 months ago
1 year ago
1 year ago
11 months ago
12 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago