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
<.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
Sizes
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 | - |