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

19.13.0 • Published 8 months ago

Install

Weekly downloads

-

License

MIT

Repository

Last release

8 months 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

0.0.0-canary-20241028125808

8 months ago

0.0.0-preview-FCT-1187-20241024123200

8 months ago

0.0.0-preview-FCT-1187-20241021190428

8 months ago

8 months ago

0.0.0-canary-20241014160150

8 months ago

0.0.0-canary-20241009193324

9 months ago

0.0.0-canary-20241003153231

9 months ago

0.0.0-canary-20241002142913

9 months ago

0.0.0-canary-20240925165851

9 months ago

0.0.0-canary-20241003151043

9 months ago

0.0.0-canary-20241003145429

9 months ago

0.0.0-canary-20241010130729

9 months ago

0.0.0-canary-20241010162605

9 months ago

0.0.0-canary-20241009071024

9 months ago

0.0.0-canary-20241001174409

9 months ago

9 months ago

0.0.0-canary-20241002142715

9 months ago

0.0.0-canary-20240925171250

9 months ago

0.0.0-canary-20241010205637

9 months ago

0.0.0-canary-20241009175534

9 months ago

0.0.0-canary-20241011135231

9 months ago

0.0.0-canary-20241002130953

9 months ago

0.0.0-canary-20240924135022

9 months ago

0.0.0-canary-20240924122353

9 months ago

0.0.0-canary-20240925133422

9 months ago

0.0.0-canary-20240918181700

9 months ago

0.0.0-canary-20240918073948

9 months ago

0.0.0-canary-20240917153604

9 months ago

0.0.0-canary-20240918160237

9 months ago

0.0.0-canary-20240916085337

9 months ago

0.0.0-canary-20240920133329

9 months ago

0.0.0-canary-20240902123520

10 months ago

0.0.0-preview-test-preview-publishing-20240918183346

9 months ago

9 months ago

0.0.0-canary-20240917143329

9 months ago

0.0.0-canary-20240916105227

9 months ago

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

9 months ago

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

9 months ago

10 months ago

0.0.0-canary-20240807084212

11 months ago

0.0.0-canary-20240604151817

1 year ago

1 year ago

11 months ago

11 months ago

0.0.0-canary-20240530100629

1 year ago

0.0.0-canary-20240805095513

11 months ago

0.0.0-canary-20240625124027

12 months ago

12 months 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

11 months ago

0.0.0-canary-20240726072030

11 months ago

0.0.0-canary-20240725110422

11 months ago

12 months ago

0.0.0-canary-20240719104735

11 months ago

0.0.0-canary-20240604153622

1 year ago

0.0.0-canary-20240522101026

1 year ago

0.0.0-canary-20240715071321

11 months ago

0.0.0-canary-20240621090426

1 year ago

0.0.0-canary-20240626090327

12 months ago

0.0.0-canary-20240604115928

1 year ago

0.0.0-canary-20240807112850

11 months ago

0.0.0-canary-20240625115755

12 months ago

1 year ago

11 months ago

0.0.0-canary-20240716102951

11 months 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

12 months 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

1 year ago

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

1 year ago

0.0.0-canary-20240502134907

1 year ago

0.0.0-canary-20240503111328

1 year ago

0.0.0-canary-20240502125854

1 year ago

1 year ago

0.0.0-canary-20240429110037

1 year ago

0.0.0-canary-20240429095712

1 year ago

0.0.0-canary-20240429151613

1 year ago

0.0.0-canary-20240429080049

1 year ago

0.0.0-canary-20240426091858

1 year ago

0.0.0-canary-20240425084041

1 year ago

0.0.0-canary-20240424133322

1 year ago

0.0.0-canary-20240424125820

1 year ago

0.0.0-canary-20240424172230

1 year ago

0.0.0-canary-20240423075704

1 year ago

0.0.0-canary-20240422074013

1 year ago

1 year ago

0.0.0-canary-20240417141019

1 year ago

0.0.0-canary-20240417152832

1 year ago

0.0.0-canary-20240416080627

1 year ago

0.0.0-canary-20240416122003

1 year ago

0.0.0-canary-20240415154231

1 year ago

0.0.0-canary-20240412080035

1 year ago

0.0.0-canary-20240415155633

1 year ago

0.0.0-canary-20240411070250

1 year ago

0.0.0-canary-20240409155122

1 year ago

0.0.0-canary-20240408083654

1 year ago

0.0.0-canary-20240408082643

1 year ago

0.0.0-canary-20240408081653

1 year ago

0.0.0-canary-20240408075655

1 year ago

0.0.0-canary-20240408094037

1 year ago

0.0.0-canary-20240404141323

1 year ago

0.0.0-canary-20240401115502

1 year ago

0.0.0-canary-20240326165038

1 year ago

1 year ago

0.0.0-canary-20240322105825

1 year ago

0.0.0-canary-20240321141818

1 year ago

0.0.0-canary-20240321125808

1 year ago

0.0.0-canary-20240321085855

1 year ago

0.0.0-canary-20240321154822

1 year ago

0.0.0-canary-20240320080808

1 year ago

0.0.0-canary-20240319155008

1 year ago

0.0.0-canary-20240319084832

1 year ago

0.0.0-canary-20240318154412

1 year ago

0.0.0-canary-20240319081838

1 year ago

0.0.0-canary-20240319084420

1 year ago

1 year ago

0.0.0-canary-20240318073724

1 year ago

0.0.0-canary-20240311155934

1 year ago

0.0.0-canary-20240311163353

1 year ago

1 year ago

0.0.0-canary-20240229120215

1 year ago

0.0.0-canary-20240229082531

1 year ago

1 year ago

0.0.0-canary-20240222103400

1 year ago

0.0.0-canary-20240221114521

1 year ago

1 year ago

0.0.0-canary-20240219160124

1 year ago

0.0.0-canary-20240214093533

1 year ago

0.0.0-canary-20240214142237

1 year ago

1 year ago

0.0.0-canary-20240213091505

1 year ago

1 year ago

0.0.0-canary-20240212084750

1 year ago

0.0.0-canary-20240212173604

1 year ago

0.0.0-canary-20240209081746

1 year ago

0.0.0-canary-20240208102915

1 year ago

0.0.0-canary-20240207115036

1 year ago

1 year ago

0.0.0-canary-20240206161325

1 year ago