RTL Support: Full

Accessibility: Full

Translations: Not Needed

Progress

Progress component for displaying progress status

Default

A basic line progress bar with the percentage value placed outside the bar.

label adds a caption above the bar, and unit sets the suffix on the value indicator — it defaults to %, so pass it only when the number means something else.

50%

Storage used

50%

Storage used

50 MB

vue

<template>
  <HLProgress id="example-progress" :percentage="50" type="line" valuePlacement="outside" />

  <!-- `label` captions the bar -->
  <HLProgress id="example-progress-label" :percentage="50" type="line" valuePlacement="outside" label="Storage used" />

  <!-- `unit` replaces the default "%" suffix -->
  <HLProgress id="example-progress-unit" :percentage="50" type="line" valuePlacement="outside" label="Storage used" unit=" MB" />
</template>

<script setup lang="ts">
import { HLProgress } from '@platform-ui/highrise'
</script>

Value Placement

The valuePlacement prop renders the value indicator either inside or outside the progress bar.

Inside Value

Value indicator appears inside the progress bar

Outside Value

70%

Value indicator appears outside the progress bar

vue

<template>
  <HLProgress
    id="example-progress-inside"
    :percentage="70"
    type="line"
    valuePlacement="inside"
    label="Inside Value"
    helperText="Value indicator appears inside the progress bar"
  />
  <HLProgress
    id="example-progress-outside"
    :percentage="70"
    type="line"
    valuePlacement="outside"
    label="Outside Value"
    helperText="Value indicator appears outside the progress bar"
  />
</template>

<script setup lang="ts">
import { HLProgress } from '@platform-ui/highrise'
</script>

Progress with Helper Text

The label and helperText props add descriptive text above the bar, and status colors it for success or error states.

Upload Progress

3.8 MB of 4.2 MB uploaded

Download Complete

File downloaded successfully

Download Failed

Connection error occurred. Click to retry.

vue

<template>
  <HLProgress id="example-progress-helper" :percentage="85" type="line" label="Upload Progress" helperText="3.8 MB of 4.2 MB uploaded" />
  <HLProgress
    id="example-progress-helper-success"
    :percentage="100"
    type="line"
    status="success"
    label="Download Complete"
    helperText="File downloaded successfully"
  />
  <HLProgress
    id="example-progress-helper-error"
    :percentage="45"
    type="line"
    status="error"
    label="Download Failed"
    helperText="Connection error occurred. Click to retry."
  />
</template>

<script setup lang="ts">
import { HLProgress } from '@platform-ui/highrise'
</script>

Processing State

The processing prop animates the filled portion to indicate an active, ongoing operation.

vue

<template>
  <HLProgress :percentage="60" type="line" :processing="true" id="example-progress-processing" />
</template>

<script setup lang="ts">
import { HLProgress } from '@platform-ui/highrise'
</script>

Indeterminate State

The indeterminate prop shows continuous motion without a fixed percentage, for when progress cannot be measured.

Indeterminate...

vue

<template>
  <HLProgress id="example-progress-indeterminate" type="line" :indeterminate="true" :height="7" label="Indeterminate..." />
</template>

<script setup lang="ts">
import { HLProgress } from '@platform-ui/highrise'
</script>

Line Shape

Three props control the geometry of a line bar:

height — the bar's thickness in pixels.
borderRadius — the corner radius of the rail (the full-width track).
fillBorderRadius — the corner radius of the filled portion. Leave it unset and the fill follows borderRadius; set it separately for a square fill inside a rounded rail, or the reverse.

Default

height: 16

borderRadius: 0

Rounded rail, square fill

vue

<template>
  <HLProgress id="example-progress-shape-default" :percentage="60" type="line" label="Default" />

  <!-- Thicker bar -->
  <HLProgress id="example-progress-shape-thick" :percentage="60" type="line" :height="16" label="height: 16" />

  <!-- Square corners on both rail and fill -->
  <HLProgress id="example-progress-shape-square" :percentage="60" type="line" :height="16" :border-radius="0" label="borderRadius: 0" />

  <!-- Rail and fill given different radii -->
  <HLProgress
    id="example-progress-shape-mixed"
    :percentage="60"
    type="line"
    :height="16"
    :border-radius="8"
    :fill-border-radius="0"
    label="Rounded rail, square fill"
  />
</template>

<script setup lang="ts">
import { HLProgress } from '@platform-ui/highrise'
</script>

INFO

height, borderRadius, and fillBorderRadius apply to the line type. Ring types are sized with stroke-width, dashboard-size, or custom-size instead — see Custom Size, Font Size, and Ring Thickness.

Circle Type

The circle type renders progress as a ring, with dashboard-size controlling its diameter across the available sizes.

60%

Label

60%

Label

60%

Label

60%

Label

60%

vue

<template>
  <HLProgress :percentage="60" type="circle" :processing="true" dashboard-size="2xs" label="Label" id="example-progress-circle-2xs" />
  <HLProgress :percentage="60" type="circle" :processing="true" dashboard-size="xs" label="Label" id="example-progress-circle-xs" />
  <HLProgress :percentage="60" type="circle" :processing="true" dashboard-size="sm" label="Label" id="example-progress-circle-sm" />
  <HLProgress :percentage="60" type="circle" :processing="true" dashboard-size="md" label="Label" id="example-progress-circle-md" />
  <HLProgress :percentage="60" type="circle" :processing="true" dashboard-size="lg" label="Label" id="example-progress-circle-lg" />
</template>

<script setup lang="ts">
import { HLProgress } from '@platform-ui/highrise'
</script>

Dashboard Type

The dashboard type renders progress as a gauge with a gap at the bottom of the arc.

60%

vue

<template>
  <HLProgress :percentage="60" type="dashboard" :processing="true" id="example-progress-dashboard" />
</template>

<script setup lang="ts">
import { HLProgress } from '@platform-ui/highrise'
</script>

Arc Geometry

For circle and dashboard, three props shape the arc itself:

gapDegree — how many degrees of the ring are cut away (0–360). This is what makes a dashboard a gauge rather than a full ring: it defaults to 75 for dashboard and to no gap for circle, so setting it on a circle turns that into a gauge too.
offsetDegree — rotates the whole ring, moving where the arc begins.
gapOffsetDegree — shifts the gap around the ring without rotating the fill with it.

circle (no gap)

60%

gapDegree: 75

60%

gapDegree: 180

60%

offsetDegree: 180

60%

gapOffsetDegree: 90

60%

vue

<template>
  <!-- A plain circle has no gap -->
  <HLProgress id="example-progress-arc-circle" :percentage="60" type="circle" label="circle (no gap)" />

  <!-- Cutting a gap turns a circle into a gauge -->
  <HLProgress id="example-progress-arc-gap" :percentage="60" type="circle" :gap-degree="75" label="gapDegree: 75" />
  <HLProgress id="example-progress-arc-gap-180" :percentage="60" type="circle" :gap-degree="180" label="gapDegree: 180" />

  <!-- Rotate the whole ring -->
  <HLProgress id="example-progress-arc-offset" :percentage="60" type="dashboard" :offset-degree="180" label="offsetDegree: 180" />

  <!-- Move the gap without rotating the fill -->
  <HLProgress id="example-progress-arc-gap-offset" :percentage="60" type="dashboard" :gap-offset-degree="90" label="gapOffsetDegree: 90" />
</template>

<script setup lang="ts">
import { HLProgress } from '@platform-ui/highrise'
</script>

INFO

The dashboard type is a circle with gapDegree preset to 75. Pass gapDegree explicitly on either type to override it — including 0 on a dashboard to close the gap entirely.

Multiple Circle Type

The multiple-circle type renders concentric rings, accepting arrays for percentage, color, and rail-style to drive each ring independently. circle-gap sets the spacing between adjacent rings (default 1) — raise it to separate the rings, or drop it to 0 to pack them together.

Race Circles!

vue

<template>
  <div class="space-y-4">
    <div class="flex items-center gap-4">
      <HLProgress
        id="example-progress-multiple-circle-animated"
        :percentage="percentages"
        type="multiple-circle"
        :color="colors"
        :rail-style="railStyles"
        dashboard-size="lg"
      >
        <div style="text-align: center">Race Circles!</div>
      </HLProgress>
      <div class="flex flex-col gap-2">
        <button
          class="px-4 py-2 text-sm font-medium text-white bg-success-500 rounded hover:bg-success-600 focus:outline-none focus:ring-2 focus:ring-success-500 focus:ring-offset-2"
          @click="add10Percent"
        >
          Add 10%
        </button>
        <button
          class="px-4 py-2 text-sm font-medium text-white bg-warning-500 rounded hover:bg-warning-600 focus:outline-none focus:ring-2 focus:ring-warning-500 focus:ring-offset-2"
          @click="minus10Percent"
        >
          Minus 10%
        </button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { HLProgress } from '@platform-ui/highrise'

const percentages = ref([10, 20, 30, 40, 50])
const colors = ['var(--purple-500)', 'var(--success-500)', 'var(--warning-500)', 'var(--error-500)', 'var(--info-500)']
const railStyles = colors.map(color => ({
  stroke: color,
  opacity: 0.2,
}))

function add10Percent() {
  percentages.value = percentages.value.map(p => {
    const next = p + 10
    return next > 100 ? 100 : next
  })
}

function minus10Percent() {
  percentages.value = percentages.value.map(p => {
    const next = p - 10
    return next < 0 ? 0 : next
  })
}
</script>

Stepper Type

The stepper type splits the bar into discrete segments, with max-steps setting the number of steps.

Progress Steps

Step 2 of 4 completed

Progress Steps Outside

Step 3 of 5 completed

Progress Steps Complete

All steps completed

vue

<template>
  <HLProgress
    id="example-progress-stepper"
    :percentage="50"
    type="stepper"
    :max-steps="4"
    label="Progress Steps"
    helperText="Step 2 of 4 completed"
  />
  <HLProgress
    id="example-progress-stepper-outside"
    :percentage="60"
    type="stepper"
    value-placement="outside"
    :max-steps="5"
    label="Progress Steps Outside"
    helperText="Step 3 of 5 completed"
  />
  <HLProgress
    id="example-progress-stepper-success"
    :percentage="100"
    type="stepper"
    :max-steps="4"
    status="success"
    label="Progress Steps Complete"
    helperText="All steps completed"
  />
</template>

<script setup lang="ts">
import { HLProgress } from '@platform-ui/highrise'
</script>

Custom Size, Font Size, and Ring Thickness

Three props override the sizing that dashboard-size would otherwise provide: custom-size sets the circle's diameter in pixels, custom-font-size sets the indicator text size, and stroke-width sets the thickness of the ring itself.

Custom Circle

75%

vue

<template>
  <HLProgress
    :percentage="75"
    type="circle"
    :stroke-width="3"
    :custom-size="150"
    custom-font-size="15px"
    label="Custom Circle"
    id="example-progress-custom-large"
  />
</template>

<script setup lang="ts">
import { HLProgress } from '@platform-ui/highrise'
</script>

Customized Progress

The color prop sets the fill color, and the default slot replaces the center content.

Active Users

vue

<template>
  <HLProgress :percentage="50" type="circle" color="purple" id="example-progress-circle-purple">
    <template #default>
      <div>Active Users</div>
    </template>
  </HLProgress>
</template>

<script setup lang="ts">
import { HLProgress } from '@platform-ui/highrise'
</script>

For inline progress variants (pie/donut charts), use the separate HLProgressInline component.

Accessibility

Give the bar an accessible name via aria-label / aria-labelledby describing what is progressing.
Maintain aria-valuemin, aria-valuemax, and aria-valuenow; add aria-valuetext when a textual summary (“3 of 5 steps”) is clearer.
Wrap async updates in aria-live="polite" so progress changes announce automatically.

Imports

import { HLProgress } from '@platform-ui/highrise'

Props

Several props only take effect for specific type values — the Applies to column notes the scope, and props with no note apply to all types. In particular:

percentage as an array is only meaningful for multiple-circle (one value per ring). For every other type, only the first array element is used.
height sets the bar thickness for line and stepper; ring types (circle / dashboard / multiple-circle) are sized with stroke-width, dashboard-size, or custom-size instead.
indeterminate is designed for the line type: while true, percentage is ignored, the value indicator is hidden, and the bar shows continuous motion. It has no meaningful effect on stepper or multiple-circle, and on circle / dashboard it only hides the indicator (no animation). Use it only when progress can't be measured; leave it false to drive the bar with percentage.

Name	Type	Default	Applies to	Description
id *	`string`	—	all	The `id` of the element
percentage	`number \| number[]`	`0`	all	Progress percentage. Array form drives per-ring values for `multiple-circle`; other types use the first element only
type	`'circle' \| 'line' \| 'dashboard' \| 'multiple-circle' \| 'stepper'`	`'line'`	—	Progress type
processing	`boolean`	`false`	line	Animates the filled portion to signal an active operation
indeterminate	`boolean`	`false`	line	Continuous motion with no fixed value; overrides `percentage` and hides the indicator while `true`
valuePlacement	`'inside' \| 'outside'`	`'inside'`	line, stepper	Placement of the indicator
status	`'success' \| 'error' \| 'warning' \| 'info' \| 'default'`	`'default'`	all	Status of progress
showIndicator	`boolean`	`true`	all	Whether to display indicators
borderRadius	`number \| string`	`undefined`	line	Border radius for line type progress
circleGap	`number`	`1`	multiple-circle	Gap between circles for multiple-circle type
color	`string \| string[] \| undefined`	`undefined`	all	Progress color. Array form colors each ring of `multiple-circle`
fillBorderRadius	`number \| string \| undefined`	`undefined`	line	Fill's border radius for line type
gapDegree	`number`	`undefined`	circle, dashboard	Size of the arc gap (0-360). Defaults to `75` for `dashboard` and `0` for `circle` when unset
gapOffsetDegree	`number`	`0`	circle, dashboard	Gap offset degree
height	`number \| undefined`	`undefined`	line, stepper	Bar thickness in px for line and stepper types
strokeWidth	`number`	`7`	circle, dashboard, multiple-circle	Ring thickness
unit	`string`	`'%'`	line, circle, dashboard	Progress unit
label	`string \| undefined`	`undefined`	line, stepper, circle, dashboard	Progress label
helperText	`string \| undefined`	`undefined`	line, stepper	Helper text
dashboardSize	`'2xs' \| 'xs' \| 'sm' \| 'md' \| 'lg'`	`'sm'`	circle, dashboard	Size for dashboard/circle type
indicatorTextColor	`string \| undefined`	`undefined`	line, circle, dashboard	Color of the indicator text
offsetDegree	`number`	`0`	circle, dashboard	Rotates the arc's start position
railColor	`string \| string[] \| undefined`	`undefined`	all	Color of the rail
railStyle	`string \| CSSProperties \| (string \| CSSProperties)[] \| undefined`	`undefined`	line, circle, dashboard, multiple-circle	Style of the rail (not applied to `stepper`)
maxSteps	`number`	`10`	stepper	Number of steps for stepper type (2-100)
customSize	`number`	`undefined`	circle, dashboard	Custom size for progress
customFontSize	`string`	`undefined`	circle, dashboard	Custom font size for progress

Slots

Name	Parameters	Description
default	`()`	Custom content for progress indicator

Progress ​

Default ​

Value Placement ​

Progress with Helper Text ​

Processing State ​

Indeterminate State ​

Line Shape ​

Circle Type ​

Dashboard Type ​

Arc Geometry ​

Multiple Circle Type ​

Stepper Type ​

Custom Size, Font Size, and Ring Thickness ​

Customized Progress ​

Related Components ​

Accessibility ​

Imports ​

Props ​

Slots ​

Progress

Default

Value Placement

Progress with Helper Text

Processing State

Indeterminate State

Line Shape

Circle Type

Dashboard Type

Arc Geometry

Multiple Circle Type

Stepper Type

Custom Size, Font Size, and Ring Thickness

Customized Progress

Related Components

Accessibility

Imports

Props

Slots