---
title: Progress
desc: Visually represents the completion status of a task, process, or page load status.
ico: mdi:progress-clock
keywords:
  - loading
  - radial
  - stat

props:
  - class: .prs-progress
    type: component
    desc: Container
  - class: .prs-progress-radial
    type: component
    desc: Container
  - class: .prs-progress-label
    type: component
    desc: Container

controls:
  - name: label
    type: text
    label: Label
    desc: As always, keep it simple. <strong>Has no effect on radial version.</strong>
    default: Label
  - name: value
    type: range
    label: Value
    desc: 0-100.
    min: 0
    max: 100
    step: 1
    default: 50
  - name: showValue
    type: toggle
    label: Show value
    desc: Display value as label under the progress bar. <strong>Has no effect on radial version.</strong>
    default: false
  - name: variant
    type: radio
    label: Variant
    desc: Color variants.
    default: default
    options:
      - default
      - secondary
      - accent
      - info
      - success
      - warning
      - danger
      - neutral
  - name: radial
    type: toggle
    label: Radial
    desc: Alternate display that strays from the progress tag.
    default: false
  - name: indeterminate
    type: toggle
    label: Indeterminate
    desc: Animated indeterminate status. Remove value and max attributes. <strong>Has no effect on radial version.</strong>
    default: false

preview: |
  <div x-show="!radial" class="prs-progress-label w-screen max-w-xs">
    <label x-show="label.length" for="progress-1" x-text="label"></label>
    <progress
      id="progress-1"
      :max="indeterminate ? false : 100"
      class="prs-progress"
      :class="{
        'prs-progress-secondary': variant === 'secondary',
        'prs-progress-accent': variant === 'accent',
        'prs-progress-info': variant === 'info',
        'prs-progress-success': variant === 'success',
        'prs-progress-warning': variant === 'warning',
        'prs-progress-danger': variant === 'danger',
        'prs-progress-neutral': variant === 'neutral',
      }"
      x-effect="indeterminate ? $el.removeAttribute('value') : $el.setAttribute('value', value)"
      x-text="value +'%'"
    ></progress>
    <label x-show="showValue && !indeterminate" for="progress-1" x-text="value +'%'"></label>
  </div>

  <div x-show="radial">
    <div
      x-text="value +'%'"
      class="prs-progress-radial"
      :class="{
        'prs-progress-secondary': variant === 'secondary',
        'prs-progress-accent': variant === 'accent',
        'prs-progress-info': variant === 'info',
        'prs-progress-success': variant === 'success',
        'prs-progress-warning': variant === 'warning',
        'prs-progress-danger': variant === 'danger',
        'prs-progress-neutral': variant === 'neutral',
      }"
      :style="'--value: '+ value" role="progressbar"
      :aria-valuenow="75"
    ></div>
  </div>

code:
  html: |
    {default}{radial}
  logic:
    default: "!this.radial ? '<div class=\"prs-progress-label\">\\n  {label}<progress id=\"progress-1\" class=\"prs-progress{variant}\"{indeterminate}>{indeterminateValue}</progress>{showValue}\\n</div>' : ''"
    radial: "this.radial ? '<div \\n  class=\"prs-progress-radial{variant}\" \\n  style=\"--value: {value}\" \\n  role=\"progressbar\" \\n  aria-valuenow=\"{value}\"\\n>\\n  {value}%\\n</div>' : ''"
    indeterminate: "this.indeterminate ? ' aria-label=\"Content loading...\"' : ' value=\"{value}\" max=\"100\"'"
    indeterminateValue: "this.indeterminate ? '' : '{value}%'"
    label: "this.label !== '' ? ('<label for=\"progress-1\">'+ this.label +'</label>\\n  ') : ''"
    showValue: "this.showValue ? ('\\n  <label for=\"progress-1\">'+ this.value +'%</label>') : ''"
    value: "this.value"
    variant: "this.variant !== 'default' ? (' prs-progress-'+ this.variant) : ''"
---