Progress

A rounded progress bar, or a row of steps, built from table cells so every mail client keeps its fill and size.

Basic

Set percent from 0 to 100 to fill the rounded bar across the full width, with the percentage after it.

Status

Set status to success or exception to paint the bar green or red and show its icon in place of the number.

Without percentage

Set showInfo={false} to draw the bar alone, like a profile that is almost complete.

Size

Set size to small for a thinner bar, leave it out for the default height, or pass a number to set the height yourself.

Square ends

Set strokeLinecap to square to draw the rail and the fill with square ends instead of a capsule.

Labeled group

Set label to write a name above each bar, with the percentage at the end of the same line.

Columns

Labeled bars in a Row of two Columns, each bar filling the width of its own column.

Steps

Set steps to draw the bar as separate blocks, and size={[width, height]} to size each block.

Success segment

Set success={{ percent }} to draw a green segment at the start of the fill, like the finished part of a total.

Percentage inside

Set percentPosition={{ type: "inner" }} with a taller size to write the percentage inside the fill, shown here at 0, 50 and 100 percent.