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
heex 
          <.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
xs
sm
md
lg
xl with label
15%
heex 
          <.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
elixir 
            # <.progress>
  attr(:size, :string, default: "md", values: ["xs", "sm", "md", "lg", "xl"])
  attr(:color, :string, default: "primary", values: ["primary", "secondary", "info", "success", "warning", "danger", "gray"])
  attr(:label, :string, default: nil, doc: "labels your progress bar [xl only]")
  attr(:value, :integer, default: nil, doc: "adds a value to your progress bar")
  attr(:max, :integer, default: 100, doc: "sets a max value for your progress bar")
  attr(:class, :string, default: "", doc: "CSS class")
  attr(:rest, :global)