@commercetools-uikit/progress-bar NPM | npm.io

19.2.0 • Published 4 days ago

Install

Weekly downloads

-

License

MIT

Repository

Last release

4 days ago

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.

javascript typescript design-system react uikit

@babel/runtime @babel/runtime-corejs3 @commercetools-uikit/constraints @commercetools-uikit/design-system @commercetools-uikit/spacings-inline @commercetools-uikit/spacings-stack @commercetools-uikit/text @commercetools-uikit/utils @emotion/react lodash prop-types react-intl

@commercetools-frontend/ui-kit

4 days ago

0.0.0-canary-20240429110037

4 days ago

0.0.0-canary-20240429095712

4 days ago

0.0.0-canary-20240429151613

4 days ago

0.0.0-canary-20240429080049

4 days ago

0.0.0-canary-20240426091858

7 days ago

0.0.0-canary-20240425084041

8 days ago

0.0.0-canary-20240424133322

9 days ago

0.0.0-canary-20240424125820

9 days ago

0.0.0-canary-20240424172230

9 days ago

0.0.0-canary-20240423075704

10 days ago

0.0.0-canary-20240422074013

11 days ago

16 days ago

0.0.0-canary-20240417141019

16 days ago

0.0.0-canary-20240417152832

16 days ago

0.0.0-canary-20240416080627

17 days ago

0.0.0-canary-20240416122003

17 days ago

0.0.0-canary-20240415154231

18 days ago

0.0.0-canary-20240412080035

21 days ago

0.0.0-canary-20240415155633

18 days ago

0.0.0-canary-20240411070250

22 days ago

0.0.0-canary-20240409155122

24 days ago

0.0.0-canary-20240408083654

25 days ago

0.0.0-canary-20240408082643

25 days ago

0.0.0-canary-20240408081653

25 days ago

0.0.0-canary-20240408075655

25 days ago

0.0.0-canary-20240408094037

25 days ago

0.0.0-canary-20240404141323

29 days ago

0.0.0-canary-20240401115502

1 month ago

0.0.0-canary-20240326165038

1 month ago

1 month ago

0.0.0-canary-20240322105825

1 month ago

0.0.0-canary-20240321141818

1 month ago

0.0.0-canary-20240321125808

1 month ago

0.0.0-canary-20240321085855

1 month ago

0.0.0-canary-20240321154822

1 month ago

0.0.0-canary-20240320080808

1 month ago

0.0.0-canary-20240319155008

2 months ago

0.0.0-canary-20240319084832

2 months ago

0.0.0-canary-20240318154412

2 months ago

0.0.0-canary-20240319081838

2 months ago

0.0.0-canary-20240319084420

2 months ago

2 months ago

0.0.0-canary-20240318073724

2 months ago

0.0.0-canary-20240311155934

2 months ago

0.0.0-canary-20240311163353

2 months ago

2 months ago

0.0.0-canary-20240229120215

2 months ago

0.0.0-canary-20240229082531

2 months ago

2 months ago

0.0.0-canary-20240222103400

2 months ago

0.0.0-canary-20240221114521

2 months ago

2 months ago

0.0.0-canary-20240219160124

2 months ago

0.0.0-canary-20240214093533

3 months ago

0.0.0-canary-20240214142237

3 months ago

3 months ago

0.0.0-canary-20240213091505

3 months ago

3 months ago

0.0.0-canary-20240212084750

3 months ago

0.0.0-canary-20240212173604

3 months ago

0.0.0-canary-20240209081746

3 months ago

0.0.0-canary-20240208102915

3 months ago

0.0.0-canary-20240207115036

3 months ago

3 months ago

0.0.0-canary-20240206161325

3 months ago