shadcn/phlexcomponents

Progress

Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.

API Reference

Progress

NameTypeDefault
value:number0
Progress percentage value from 0 to 100.
attributeskeyword arguments

Examples

With JS

<div class="flex gap-2 items-center w-[60%]">

  <%= render Button.new(id: "decrease-progress", variant: :secondary, size: :icon) do %>

    <%= lucide_icon("minus") %>

  <% end %>



  <%= render Progress.new(id: "progress", class: "grow") %>



  <%= render Button.new(id: "increase-progress", variant: :secondary, size: :icon) do %>

    <%= lucide_icon("plus") %>

  <% end %>

</div>

<div class="flex gap-2 items-center w-[60%]">  <button type="button" id="decrease-progress" data-shadcn-phlexcomponents="button" class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80 size-9">

    <svg aria-hidden="true" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"></path></svg>

  </button>

  <div role="progressbar" aria-valuemax="100" aria-valuemin="0" aria-valuenow="0" data-controller="progress" data-progress-percent-value="0" data-shadcn-phlexcomponents="progress" id="progress-component" class="bg-primary/20 relative h-2 w-full overflow-hidden rounded-full grow">

    <div style="transform: translateX(-100%)" data-progress-target="indicator" data-shadcn-phlexcomponents="progress-indicator" class="bg-primary h-full w-full flex-1 transition-all"></div>

  </div>

  <button type="button" id="increase-progress" data-shadcn-phlexcomponents="button" class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80 size-9">

    <svg aria-hidden="true" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"></path><path d="M12 5v14"></path></svg>

  </button></div>

// application.js

const increaseButton = document.querySelector('#increase-progress')

const decreaseButton = document.querySelector('#decrease-progress')

const progress = window.Stimulus.getControllerForElementAndIdentifier(

  document.querySelector('#progress'),

  'progress',

)



increaseButton.addEventListener('click', () => {

  const value = progress.percentValue

  if (value < 100) {

    progress.percentValue = value + 10

  }

})



decreaseButton.addEventListener('click', () => {

  const value = progress.percentValue

  if (value > 0) {

    progress.percentValue = value - 10

  }

})