Components

Progress

Shows how far along a task is.

Usage

Basic

HTML

<bs:bsui-progress value="64" max="100" label="Building" />

Custom scale

The max is any total, so a step counter needs no conversion to percent.

HTML

<bs:bsui-progress value="3" max="8" label="Step 3 of 8" />

Build steps

Several bars in a column show a pipeline that is finished, running and queued.

Install dependencies

Compile Tailwind

Warm the cache

HTML

<bs:bsui-stack direction="column" gap="4">
  <bs:bsui-stack direction="column" gap="2">
    <bs:bsui-text content="Install dependencies" variant="label" tag="span" />
    <bs:bsui-progress value="100" max="100" label="Install dependencies" />
  </bs:bsui-stack>
  <bs:bsui-stack direction="column" gap="2">
    <bs:bsui-text content="Compile Tailwind" variant="label" tag="span" />
    <bs:bsui-progress value="72" max="100" label="Compile Tailwind" />
  </bs:bsui-stack>
  <bs:bsui-stack direction="column" gap="2">
    <bs:bsui-text content="Warm the cache" variant="label" tag="span" />
    <bs:bsui-progress value="0" max="100" label="Warm the cache" />
  </bs:bsui-stack>
</bs:bsui-stack>

Attributes

Attribute	Type	Default
`value`	`number`	`0`
`max`	`number`	`100`
`label`	`text`	—