logo
v 1.0.220

Stepper

A stepper component is used to indicate progress through a multi-step process.

setup

Import the Progress component in a script tag.

Svelte Copy
import { Progress } from "@mgisolutions/design-system/svelte";

basic usage

Use the following example of a progress bar element to show a completion rate of 45% by using an inline style.

Demonstrate
Svelte Copy
<Progress value={45} />

value

Use the color prop to change the color of a progress bar.

Demonstrate
Svelte Copy
<Progress value={25} /> <Progress value={50} /> <Progress value={70} />

color

Progress value (0 < x < 100)

Demonstrate
Svelte Copy
<Progress value={45} state="progress" color="#FDAC55" /> <Progress value={45} state="progress" color="#2648D4" /> <Progress value={45} state="progress" color="#48D694" />

Height

Use the size prop to change the size of a progress bar.

Demonstrate
Svelte Copy
<Progress value={45} state="progress" height={4} /> <Progress value={45} state="progress" height={8} /> <Progress value={45} state="progress" height={12} />

State

Use the state prop to change the status of a progress bar.

Demonstrate
Svelte Copy
<Progress state="progress" value={45} /> <Progress state="error" /> <Progress state="success" />

hide label

Use the hideLabel prop to hidden the label of a progress bar.

Demonstrate
Svelte Copy
<Progress state="progress" value={45} hideLabel />

custom label

Use the label prop to replace the default label of a progress bar.

Demonstrate
Svelte Copy
<Progress state="progress" label="Download documents" />

indeterminate

If you don't set the value prop, you can display an indeterminate progress bar. It's used to show that some progress is going on, but the total duration is not yet determined.

Demonstrate
Svelte Copy
<Progress state="progress" indeterminate />

Component Data

  • props
Name Description Type Default
value number empty
color string #FFFFFF
height number | string 4
state string progress
hideLabel boolean false
label string empty
indeterminate boolean false