Progress

Components Progress

Progress

Using progress is an important method of communicating to your user how much progress they have made and how much they have left. It is a great way to calm your users through any type of potentially lengthy process.

Progress bars

Primary

Secondary

Info

Success

Warning

Danger

Gray

          <.progress color="primary" value={10} max={100} class="max-w-full" />
<.progress color="secondary" value={20} max={100} class="max-w-full" />
<.progress color="info" value={30} max={100} class="max-w-full" />
<.progress color="success" value={40} max={100} class="max-w-full" />
<.progress color="warning" value={50} max={100} class="max-w-full" />
<.progress color="danger" value={60} max={100} class="max-w-full" />
<.progress color="gray" value={70} max={100} class="max-w-full" />

Sizes

xl with label

15%

          <.progress size="xs" value={15} max={100} class="max-w-full" />
<.progress color="primary" size="sm" value={15} max={100} class="max-w-full" />
<.progress size="md" value={15} max={100} class="max-w-full" />
<.progress size="lg" value={15} max={100} class="max-w-full" />
<.progress color="warning" value={75} max={100} class="max-w-full" />
<.progress size="xl" value={15} max={100} class="max-w-full" label="15%" />

Properties

Defaults are indicated in bold. Label only applies to the `xl` size option.

Name	Type	Options
label	:string	`xl`
size	:string	`xs, `sm`, `md` , `lg`, `xl`
value	:integer	-
max	:integer	-
color	:string	`primary` , `secondary`, `info`, `success`, `warning`, `danger`, `gray`
class	:string	-

On this page