20.6.7 • Published 2 months ago

@commercetools-uikit/progress-bar

Licence

MIT

Version

20.6.7

Deps

Size

56 kB

Vulns

Weekly

Stars

154

Summary Dependency Versions

ProgressBar

Description

A progress bar component used to visualize the progression of an extended operation

Installation

pnpm add @commercetools-uikit/progress-bar

npm --save install @commercetools-uikit/progress-bar

Additionally install the peer dependencies (if not present)

pnpm 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	Default	Description
`progress`	`number`	`0`	The percentage of the task completion to fill the bar.
`label`	`union` Possible values: `string , ReactElement , IntlMessage , 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'`	`defaultStyles.labelWidth`	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'`	`defaultStyles.height`	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.