@commercetools-uikit/progress-bar NPM

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	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 react-intl

@commercetools-frontend/ui-kit

19.22.2

9 months ago

19.22.3

9 months ago

0.0.0-fec-155-react-19-20250115180926

10 months ago

10 months ago

10 months ago

9 months ago

8 months ago

0.0.0-canary-20250210195612

9 months ago

19.22.4

9 months ago

0.0.0-canary-20250509133828

6 months ago

19.22.5

9 months ago

0.0.0-SUPPORT-32352-de-ch-money-input-20250509174254

6 months ago

0.0.0-canary-20241127122717

11 months ago

0.0.0-FCT-1500-adjust-legacy-css-reset-20250527090339

5 months ago

0.0.0-canary-20241107165715

12 months ago

19.18.0

11 months ago

0.0.0-canary-20241204151736

11 months ago

0.0.0-fec-155-react-19-20250220161555

9 months ago

0.0.0-preview-test-icon-entrypoints-20241212201418

11 months ago

0.0.0-canary-20250430132533

6 months ago

0.0.0-canary-20250527152601

5 months ago

0.0.0-main-20250115172531

10 months ago

0.0.0-canary-20241111111020

12 months ago

0.0.0-fec-155-react-19-20250528075244

5 months ago

0.0.0-canary-20241216165753

11 months ago

19.21.0

10 months ago

0.0.0-canary-20250210092039

9 months ago

0.0.0-fec-155-react-19-20250130165953

9 months ago

0.0.0-preview-fec-155-react-19-20250113184401

10 months ago

0.0.0-fec-155-react-19-20250122162343

10 months ago

19.17.1

11 months ago

19.17.0

11 months ago

0.0.0-fec-155-react-19-20250509174305

6 months ago

0.0.0-canary-20250423133439

6 months ago

0.0.0-fec-155-react-19-20250115180337

10 months ago

0.0.0-canary-20250509142321

6 months ago

0.0.0-canary-20250611133647

5 months ago

0.0.0-preview-test-icon-pure-annotations-20241211181046

11 months ago

0.0.0-canary-20250220095507

9 months ago

19.20.0

11 months ago

19.20.1

11 months ago

0.0.0-canary-20250509132257

6 months ago

0.0.0-canary-20250509190617

6 months ago

0.0.0-canary-20241202165718

11 months ago

19.16.0

12 months ago

0.0.0-preview-test-icon-bundle-20241210182318

11 months ago

0.0.0-canary-20250604223550

5 months ago

0.0.0-canary-20250502151616

6 months ago

0.0.0-canary-20241114144303

12 months ago

0.0.0-canary-20250115170515

10 months ago

0.0.0-canary-20241210173201

11 months ago

0.0.0-canary-20241205123945

11 months ago

0.0.0-canary-20250224143609

8 months ago

0.0.0-canary-20250210212858

9 months ago

0.0.0-canary-20250130153935

9 months ago

0.0.0-canary-20250121162920

10 months ago

0.0.0-canary-20250423194122

6 months ago

0.0.0-canary-20250509143045

6 months ago

0.0.0-canary-20250430133635

6 months ago

0.0.0-canary-20250604222925

5 months ago

0.0.0-canary-20250220135616

9 months ago

19.15.0

12 months ago

0.0.0-preview-test-icon-entrypoints-20241212180849

11 months ago

0.0.0-fec-155-react-19-20250116191128

10 months ago

0.0.0-canary-20250602072305

5 months ago

0.0.0-canary-20241107133620

12 months ago

0.0.0-canary-20241216163832

11 months ago

19.26.0

5 months ago

0.0.0-canary-20250115174211

10 months ago

0.0.0-preview-fec-155-react-19-20250108172010

10 months ago

0.0.0-canary-20250526144833

5 months ago

0.0.0-canary-20241204190350

11 months ago

0.0.0-canary-20250423204910

6 months ago

19.14.0

12 months ago

0.0.0-canary-20241219083309

11 months ago

0.0.0-canary-20241218170348

11 months ago

0.0.0-canary-20241105102837

12 months ago

0.0.0-fec-155-react-19-20250122185524

10 months ago

0.0.0-fec-155-react-19-20250430141715

6 months ago

0.0.0-canary-20250527153657

5 months ago

19.25.0

6 months ago

0.0.0-fec-155-react-19-20250502154050

6 months ago

0.0.0-canary-20250430083246

6 months ago

0.0.0-preview-test-canary-preview-20241204111237

11 months ago

0.0.0-canary-20250423192548

6 months ago

19.25.1

6 months ago

0.0.0-fec-155-react-19-20250121185545

10 months ago

0.0.0-canary-20250115180351

10 months ago

0.0.0-canary-20241217082213

11 months ago

0.0.0-canary-20250117201549

10 months ago

0.0.0-canary-20250207113149

9 months ago

0.0.0-canary-20241119102545

12 months ago

0.0.0-fec-155-react-19-20250519144337

6 months ago

0.0.0-canary-20250506123533

6 months ago

0.0.0-canary-20250604201102

5 months ago

19.24.0

6 months ago

0.0.0-canary-20250423200631

6 months ago

0.0.0-canary-20241204193303

11 months ago

0.0.0-canary-20250604201729

5 months ago

20.0.0

5 months ago

0.0.0-canary-20241119103253

12 months ago

0.0.0-fec-155-react-19-20250117211328

10 months ago

19.23.0

6 months ago

0.0.0-canary-20241120095444

12 months ago

0.0.0-canary-20241213213332

11 months ago

0.0.0-canary-20250115175352

10 months ago

0.0.0-canary-20250324145134

7 months ago

19.19.0

11 months ago

0.0.0-canary-20250423193304

6 months ago

0.0.0-canary-20241121130642

12 months ago

0.0.0-canary-20241028125808

1 year ago

0.0.0-preview-FCT-1187-20241024123200

1 year ago

0.0.0-preview-FCT-1187-20241021190428

1 year ago

19.13.0

1 year ago

0.0.0-canary-20241014160150

1 year ago

0.0.0-canary-20241009193324

1 year ago

0.0.0-canary-20241003153231

1 year ago

0.0.0-canary-20241002142913

1 year ago

0.0.0-canary-20240925165851

1 year ago

0.0.0-canary-20241003151043

1 year ago

0.0.0-canary-20241003145429

1 year ago

0.0.0-canary-20241010130729

1 year ago

0.0.0-canary-20241010162605

1 year ago

0.0.0-canary-20241009071024

1 year ago

0.0.0-canary-20241001174409

1 year ago

19.12.1

1 year ago

0.0.0-canary-20241002142715

1 year ago

0.0.0-canary-20240925171250

1 year ago

0.0.0-canary-20241010205637

1 year ago

0.0.0-canary-20241009175534

1 year ago

0.0.0-canary-20241011135231

1 year ago

0.0.0-canary-20241002130953

1 year ago

0.0.0-canary-20240924135022

1 year ago

0.0.0-canary-20240924122353

1 year ago

0.0.0-canary-20240925133422

1 year ago

0.0.0-canary-20240918181700

1 year ago

0.0.0-canary-20240918073948

1 year ago

0.0.0-canary-20240917153604

1 year ago

0.0.0-canary-20240918160237

1 year ago

0.0.0-canary-20240916085337

1 year ago

0.0.0-canary-20240920133329

1 year ago

0.0.0-canary-20240902123520

1 year ago

0.0.0-preview-test-preview-publishing-20240918183346

1 year ago

19.12.0

1 year ago

0.0.0-canary-20240917143329

1 year ago

0.0.0-canary-20240916105227

1 year ago

0.0.0-preview-test-preview-publishing-with-commit-trigger-20240919120649

1 year ago

0.0.0-preview-test-preview-publishing-with-commit-trigger-20240919103642

1 year ago

19.11.0

1 year ago

0.0.0-canary-20240807084212

1 year ago

0.0.0-canary-20240604151817

1 year ago

19.4.0

1 year ago

19.8.0

1 year ago

19.10.0

1 year ago

0.0.0-canary-20240530100629

1 year ago

0.0.0-canary-20240805095513

1 year ago

0.0.0-canary-20240625124027

1 year ago

19.7.0

1 year ago

0.0.0-canary-20240527065236

1 year ago

0.0.0-canary-20240522094639

1 year ago

0.0.0-canary-20240531145120

1 year ago

0.0.0-canary-20240723124651

1 year ago

0.0.0-canary-20240726072030

1 year ago

0.0.0-canary-20240725110422

1 year ago

19.6.0

1 year ago

0.0.0-canary-20240719104735

1 year ago

0.0.0-canary-20240604153622

1 year ago

0.0.0-canary-20240522101026

1 year ago

0.0.0-canary-20240715071321

1 year ago

0.0.0-canary-20240621090426

1 year ago

0.0.0-canary-20240626090327

1 year ago

0.0.0-canary-20240604115928

1 year ago

0.0.0-canary-20240807112850

1 year ago

0.0.0-canary-20240625115755

1 year ago

19.5.0

1 year ago

19.9.0

1 year ago

0.0.0-canary-20240716102951

1 year ago

0.0.0-canary-20240604125216

1 year ago

0.0.0-canary-20240619142933

1 year ago

0.0.0-canary-20240617063324

1 year ago

0.0.0-canary-20240604163856

1 year ago

0.0.0-canary-20240621133126

1 year ago

0.0.0-canary-20240617084426

1 year ago

0.0.0-canary-20240603111514

1 year ago

0.0.0-canary-20240521130632

1 year ago

0.0.0-canary-20240625081125

1 year ago

0.0.0-canary-20240617073522

1 year ago

0.0.0-canary-20240524063948

1 year ago

0.0.0-canary-20240520083557

1 year ago

0.0.0-canary-20240517123809

1 year ago

0.0.0-canary-20240517151402

1 year ago

0.0.0-canary-20240514135306

1 year ago

0.0.0-canary-20240513120348

1 year ago

0.0.0-canary-20240513101556

1 year ago

19.3.1

1 year ago

19.3.0

1 year ago

0.0.0-canary-20240508074817

1 year ago

0.0.0-canary-20240508080213

1 year ago

0.0.0-canary-20240507115053

1 year ago

0.0.0-canary-20240503144721

2 years ago

0.0.0-canary-20240502134907

2 years ago

0.0.0-canary-20240503111328

2 years ago

0.0.0-canary-20240502125854

2 years ago

19.2.0

2 years ago

0.0.0-canary-20240429110037

2 years ago

0.0.0-canary-20240429095712

2 years ago

0.0.0-canary-20240429151613

2 years ago

0.0.0-canary-20240429080049

2 years ago

0.0.0-canary-20240426091858

2 years ago

0.0.0-canary-20240425084041

2 years ago

0.0.0-canary-20240424133322

2 years ago

0.0.0-canary-20240424125820

2 years ago

0.0.0-canary-20240424172230

2 years ago

0.0.0-canary-20240423075704

2 years ago

0.0.0-canary-20240422074013

2 years ago

19.1.0

2 years ago

0.0.0-canary-20240417141019

2 years ago

0.0.0-canary-20240417152832

2 years ago

0.0.0-canary-20240416080627

2 years ago

0.0.0-canary-20240416122003

2 years ago

0.0.0-canary-20240415154231

2 years ago

0.0.0-canary-20240412080035

2 years ago

0.0.0-canary-20240415155633

2 years ago

0.0.0-canary-20240411070250

2 years ago

0.0.0-canary-20240409155122

2 years ago

0.0.0-canary-20240408083654

2 years ago

0.0.0-canary-20240408082643

2 years ago

0.0.0-canary-20240408081653

2 years ago

0.0.0-canary-20240408075655

2 years ago

0.0.0-canary-20240408094037

2 years ago

0.0.0-canary-20240404141323

2 years ago

0.0.0-canary-20240401115502

2 years ago

0.0.0-canary-20240326165038

2 years ago

19.0.0

2 years ago

0.0.0-canary-20240322105825

2 years ago

0.0.0-canary-20240321141818

2 years ago

0.0.0-canary-20240321125808

2 years ago

0.0.0-canary-20240321085855

2 years ago

0.0.0-canary-20240321154822

2 years ago

0.0.0-canary-20240320080808

2 years ago

0.0.0-canary-20240319155008

2 years ago

0.0.0-canary-20240319084832

2 years ago

0.0.0-canary-20240318154412

2 years ago

0.0.0-canary-20240319081838

2 years ago

0.0.0-canary-20240319084420

2 years ago

18.5.0

2 years ago

0.0.0-canary-20240318073724

2 years ago

0.0.0-canary-20240311155934

2 years ago

0.0.0-canary-20240311163353

2 years ago

18.4.0

2 years ago

0.0.0-canary-20240229120215

2 years ago

0.0.0-canary-20240229082531

2 years ago

18.3.0

2 years ago

0.0.0-canary-20240222103400

2 years ago

0.0.0-canary-20240221114521

2 years ago

18.2.0

2 years ago

0.0.0-canary-20240219160124

2 years ago

0.0.0-canary-20240214093533

2 years ago

0.0.0-canary-20240214142237

2 years ago

18.1.0

2 years ago

0.0.0-canary-20240213091505

2 years ago

18.0.0

2 years ago

0.0.0-canary-20240212084750

2 years ago

0.0.0-canary-20240212173604

2 years ago

0.0.0-canary-20240209081746

2 years ago

0.0.0-canary-20240208102915

2 years ago

0.0.0-canary-20240207115036

2 years ago

17.1.0

2 years ago

0.0.0-canary-20240206161325

2 years ago