Shadix

Progress

Displays a determinate progress bar that fills based on a 0–100 value.

<.progress></.progress>

Examples

Values

Progress bar at 0%, 40%, 75%, and 100%.

<div class="flex flex-col gap-4 w-[300px]">
  <.progress value={0} label="0% complete" />
  <.progress value={40} label="40% complete" />
  <.progress value={75} label="75% complete" />
  <.progress value={100} label="100% complete" />
</div>

Props

Name Type Default Values
class :string
label :string "Progress"
rest :global
value :integer 0