@commercetools-uikit/progress-bar

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.