Progress ​

Visually represents progress or completion of a task. Updates dynamically to give users clear feedback on status.

Examples ​

Progress
vue
<script setup lang="ts">
import { Progress } from 'frappe-ui'
</script>

<template>
  <Progress label="Progress" :value="50" />
</template>

Hint ​

Progress40%
vue
<script setup lang="ts">
import { Progress } from 'frappe-ui'
</script>

<template>
  <Progress :value="40" label="Progress" :hint="true" />
</template>

Intervals ​

Progress
vue
<script setup lang="ts">
import { Progress } from 'frappe-ui'
</script>

<template>
  <Progress
    :value="30"
    label="Progress"
    :intervals="true"
    :interval-count="5"
  />
</template>

Sizes ​

Progress - sm
Progress - md
Progress - lg
Progress - xl
vue
<script setup lang="ts">
import { Progress } from 'frappe-ui'
</script>

<template>
  <div class="w-full gap-3 items-center grid grid-cols-2 *:bordr *:rounded *:p-3">
    <Progress :value="50" size="sm" label="Progress - sm" />
    <Progress :value="50" size="md" label="Progress - md" />
    <Progress :value="50" size="lg" label="Progress - lg" />
    <Progress :value="50" size="xl" label="Progress - xl" />
  </div>
</template>

API Reference ​

Show types
typescript
export interface ProgressProps {
  /** Current progress value */
  value: number

  /** Size of the progress bar: "sm" | "md" | "lg" | "xl" */
  size?: 'sm' | 'md' | 'lg' | 'xl'

  /** Optional text label displayed on the progress bar */
  label?: string

  /** Whether to show a hint/tooltip for the progress value */
  hint?: boolean

  /** Whether to show interval markers on the progress bar */
  intervals?: boolean

  /** Number of intervals to display if `intervals` is true */
  intervalCount?: number
}
value*
number

Current progress value

size
= "sm"
"md" | "sm" | "lg" | "xl"

Size of the progress bar: "sm" | "md" | "lg" | "xl"

label
= ""
string

Optional text label displayed on the progress bar

hint
= false
boolean

Whether to show a hint/tooltip for the progress value

intervals
= false
boolean

Whether to show interval markers on the progress bar

intervalCount
= 6
number

Number of intervals to display if `intervals` is true

hint
—

Custom content for the hint area (usually displays the progress value). If not provided, defaults to showing `props.value` followed by `%`.

PopoverRating