Simple progress bar

Examples

Check out the Usage section for details about how to design a Simple progress bar properly, and the different configuration options we provide.

Basic Example

You can display a bar that indicates how far a process has progressed.

<SimpleProgressBar
    completed={25}
    total={100}
    />

Code

<SimpleProgressBar
    completed={25}
    total={100}
    />

Import statement

import { SimpleProgressBarBasic } from '@jutro/components';

Component contract

Make sure to understand the Design System components API surface, and the implications and trade-offs. Learn more in our introduction to the component API.

Properties

completedrequired

Type

number

Description

Number of steps that were completed.

totalrequired

Type

number

Description

Total number of steps.

className

Type

string

Description

Class to override the whole component styles.

hideLabel

Type

bool

Description

Hides the label. If you need to make the component be without a label and accessible, provide the label prop and set hideLabel to true -> aria-label attribute will be set to label.

Default value

false

label

Type

string | {id?, defaultMessage?, args?}

Show object details

Description

Label of the progress bar.

labelPosition

Type

'top' | 'bottom'

Description

Allows you to select the position of the progress bar label.

showPercentageProgress

Type

bool

Description

If true, shows percentage progress instead of fractions.

showProgressLabel

Type

bool

Description

Shows progress label.

iddeprecated

Type

string

Description

A unique ID for this element.

pathdeprecated

Type

string

Description

Hint path to value.

progressBarClassNamedeprecated

Type

string

Description

Class to override the progress bar styles.

stepClassNamedeprecated

Type

string

Description

Class to override the progress bar step styles.

valuedeprecated

Type

number

Description

Number of steps that were completed when used with path.

Hooks

No hooks are available for SimpleProgressBar.

Translation keys

There are no translations for SimpleProgressBar.

For information on how to manage translations, see our section about Internationalization.

Escape Hatches

For more information, see our documentation about escape hatches.

Was this page helpful?

Simple progress bar

Examples

Basic Example

Usage

Code

Import statement

Component contract

Properties

`completed`required

`total`required

`className`

`hideLabel`

`label`

`id`

`defaultMessage`

`args`

`labelPosition`

`showPercentageProgress`

`showProgressLabel`

`id`deprecated

`path`deprecated

`progressBarClassName`deprecated

`stepClassName`deprecated

`value`deprecated

Hooks

Translation keys

Escape Hatches

Changelog

10.2.0

Deprecations

Examples​

Basic Example​

Usage​

Code​

Import statement​

Component contract​

Properties​

completedrequired​

totalrequired​

className​

hideLabel​

label​

labelPosition​

showPercentageProgress​

showProgressLabel​

iddeprecated​

pathdeprecated​

progressBarClassNamedeprecated​

stepClassNamedeprecated​

valuedeprecated​

Hooks​

Translation keys​

Escape Hatches​

Changelog​

10.2.0​

Deprecations​

Examples

Basic Example

Usage

Code

Import statement

Component contract

Properties

`completed`required

`total`required

`className`

`hideLabel`

`label`

`labelPosition`

`showPercentageProgress`

`showProgressLabel`

`id`deprecated

`path`deprecated

`progressBarClassName`deprecated

`stepClassName`deprecated

`value`deprecated

Hooks

Translation keys

Escape Hatches

Changelog

10.2.0

Deprecations