Progress

Import

import { Progress } from 'tuimorphic';

Usage

The Progress component displays a progress bar with customizable fill and empty characters.

<Progress value={50} />

Props

Prop	Type	Default	Description
value	`number`	-	Current progress value (0-100) (required)
max	`number`	`100`	Maximum value
fillChar	`string`	`'█'`	Character used for filled portion
emptyChar	`string`	`'░'`	Character used for empty portion
width	`number`	`20`	Width in characters
showLabel	`boolean`	`false`	Whether to show percentage label
className	`string`	-	Additional CSS class names

Variants

Basic

<Progress value={50} />

With Label

25%

50%

75%

100%

<Progress value={75} showLabel />

Animated

Custom Characters

<Progress value={30} fillChar="=" emptyChar="-" />
<Progress value={60} fillChar="#" emptyChar="." />

Different Widths

<Progress value={50} width={10} />
<Progress value={50} width={20} />
<Progress value={50} width={30} />

Progress Steps

<Progress value={0} showLabel />
<Progress value={25} showLabel />
<Progress value={50} showLabel />
<Progress value={75} showLabel />
<Progress value={100} showLabel />

With Custom Max

<Progress value={5} max={10} showLabel />

On this page