Components Progress

Petal Pro is the full SaaS app this is built for

Auth, billing, admin, and Claude Code integration included. One purchase, unlimited projects.

See what's included

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)