RTL Support: Full

Accessibility: Full

Translations: Not Needed

migrationGuide: [object Object]

Try in Cursor

Progress Inline

Compact inline progress indicators for displaying small progress status in pie or donut chart format.

Default

Renders a basic inline progress indicator in both pie and donut formats.

<template>
  <div class="flex items-center gap-4">
    <HLProgressInline :percentage="60" type="pie" />
    <HLProgressInline :percentage="60" type="donut" />
  </div>
</template>

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

Status Colors

Applies a predefined color theme via the status prop across all indicator types.

Default

Success

Error

Warning

Info

Neutral

Default

Success

Error

Warning

Info

Neutral

<template>
  <!-- Pie status variants -->
  <div class="flex items-center gap-4 flex-wrap">
    <HLProgressInline :percentage="60" type="pie" status="default" />
    <HLProgressInline :percentage="90" type="pie" status="success" />
    <HLProgressInline :percentage="25" type="pie" status="error" />
    <HLProgressInline :percentage="50" type="pie" status="warning" />
    <HLProgressInline :percentage="70" type="pie" status="info" />
    <HLProgressInline :percentage="40" type="pie" status="neutral" />
  </div>

  <!-- Donut status variants -->
  <div class="flex items-center gap-4 flex-wrap">
    <HLProgressInline :percentage="60" type="donut" status="default" />
    <HLProgressInline :percentage="90" type="donut" status="success" />
    <HLProgressInline :percentage="25" type="donut" status="error" />
    <HLProgressInline :percentage="50" type="donut" status="warning" />
    <HLProgressInline :percentage="70" type="donut" status="info" />
    <HLProgressInline :percentage="40" type="donut" status="neutral" />
  </div>
</template>

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

Custom Colors

Overrides the status theme with custom color and rail-color values.

Custom Fill

Custom Rail Color

<template>
  <div class="flex items-center gap-4">
    <HLProgressInline :percentage="65" type="pie" color="var(--purple-600)" rail-color="var(--purple-200)" />
    <HLProgressInline :percentage="75" type="donut" color="var(--purple-600)" rail-color="var(--purple-200)" />
  </div>
</template>

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

Animated Example

Updates the percentage prop reactively on an interval to drive a live animation.

25%

<template>
  <div class="flex items-center gap-4">
    <HLProgressInline :percentage="animatedPercentage" type="pie" status="info" />
    <HLProgressInline :percentage="animatedPercentage" type="donut" status="success" />
    <span class="text-sm font-medium">{{ animatedPercentage }}%</span>
  </div>

  <div class="flex gap-2">
    <HLButton variant="primary" color="blue" size="xs" @click="startAnimation">Start</HLButton>
    <HLButton variant="secondary" color="gray" size="xs" @click="stopAnimation">Stop</HLButton>
  </div>
</template>

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

const animatedPercentage = ref(25)
const intervalId = ref(null)

function startAnimation() {
  if (intervalId.value !== null) return
  intervalId.value = setInterval(() => {
    animatedPercentage.value += 5
    if (animatedPercentage.value >= 100) {
      animatedPercentage.value = 0
    }
  }, 200)
}

function stopAnimation() {
  if (intervalId.value !== null) {
    clearInterval(intervalId.value)
    intervalId.value = null
  }
}
</script>

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 { HLProgressInline } from '@platform-ui/highrise'

Props

Name	Type	Default	Description
percentage	number	0	Progress percentage (0-100)
type	'pie' | 'donut'	'pie'	Type of inline progress indicator
status	'success' | 'error' | 'warning' | 'info' | 'default' | 'neutral'	'default'	Status determining the color theme
color	string	undefined	Custom fill color for pie chart (overrides status color)
railColor	string	undefined	Custom rail/background color