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