Accessibility: Partial

Translations: Not Needed

migrationGuide: [object Object]

Progress Inline

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

Default

Vue

<template>
  <HLProgressInline :percentage="60" type="pie" />
  <HLProgressInline :percentage="60" type="donut" />
</template>

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

Status Colors

Default

Success

Error

Warning

Info

Neutral

Default

Success

Error

Warning

Info

Neutral

Vue

<template>
  <!-- Pie status variants -->
  <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" />

  <!-- Donut status variants -->
  <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" />
</template>

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

Custom Colors

Custom Fill

Custom Rail Color

Vue

<template>
  <HLProgressInline :percentage="65" type="pie" color="var(--purple-600)" rail-color="var(--purple-200)" />
  <HLProgressInline :percentage="75" type="donut" rail-color="var(--purple-200)" />
</template>

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

Animated Example

25%

Vue

<script setup>
  import { HLProgressInline } 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>

<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">
    <button @click="startAnimation">Start</button>
    <button @click="stopAnimation">Stop</button>
  </div>
</template>

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