core component

ProgressBar

Reusable progress bar component.

@wrnexus/ui 0.2.675 props0 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<ProgressBar
  value="0"
  max="100"
  label="Progress"
  showValue="true"
/>

Legacy mount name: data-component="ProgressBar".

Props and attributes

Prop	Type	Requirement	Default
`class`	`string`	Optional	`""`
`value`	`number`	Optional	`0`
`max`	`number`	Optional	`100`
`label`	`string`	Optional	`"Progress"`
`showValue`	`boolean`	Optional	`true`

Slots

This component does not declare a slot.

Events

This component does not declare a custom event.

Source contract

Installed source: components/ProgressBar.wrn

component ProgressBar {
  props {
    class = ""
    value = 0
    max = 100
    label = "Progress"
    showValue = true
  }
  view {
        <div class="{class}">
        <div class="mb-2 flex justify-between text-sm">
        <span>{label}</span>
        <span data-show="showValue">{value}%</span>
        </div>
        <div class="h-2 overflow-hidden rounded-full bg-slate-200 dark:bg-slate-800" role="progressbar" aria-valuenow="{value}" aria-valuemin="0" aria-valuemax="{max}">
        <div class="h-full rounded-full bg-violet-600 transition-all duration-500" style="width: {value}%">
        </div>
        </div>
        </div>
    }
}