Salad UI

Progress

Renders a progress bar.

Read more Read less

Options

  • :value - The current progress value (0-100)
  • :class - Additional CSS classes
Default Open in playground 
<.progress value={50}/>
Progress bar Open in playground 
<.progress value={20} class="w-[60%]"/>
Thin progress bar Open in playground 
<.progress value={20} class="w-[60%] h-2"/>
High progress Open in playground 
<.progress value={80} class="w-[60%]"/>
Custom max Open in playground 
<.progress max={50} value={35} class="w-[60%]"/>
Used when progress value is unknown Open in playground 
<.progress class="w-[60%]" indeterminate/>