Progress
Progress component for displaying progress status
Default
50%
html
<template>
<HLProgress id="example-progress" :percentage="50" type="line" valuePlacement="outside" />
</template>
<script setup>
import { HLProgress } from '@platform-ui/highrise'
</script>Value Placement
Inside Value
Value indicator appears inside the progress bar
Outside Value
70%
Value indicator appears outside the progress bar
html
<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>
import { HLProgress } from '@platform-ui/highrise'
</script>Progress with Helper Text
Upload Progress
3.8 MB of 4.2 MB uploaded
Download Complete
File downloaded successfully
Download Failed
Connection error occurred. Click to retry.
html
<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>
import { HLProgress } from '@platform-ui/highrise'
</script>Processing State
html
<template>
<HLProgress :percentage="60" type="line" :processing="true" id="example-progress-processing" />
</template>
<script setup>
import { HLProgress } from '@platform-ui/highrise'
</script>Indeterminate State
Indeterminate...
html
<template>
<HLProgress id="example-progress-indeterminate" type="line" :indeterminate="true" :height="7" label="Indeterminate..." />
</template>
<script setup>
import { HLProgress } from '@platform-ui/highrise'
</script>Circle Type
60%
Label
Label
60%
Label
60%
Label
60%
Label
60%
html
<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>
import { HLProgress } from '@platform-ui/highrise'
</script>Dashboard Type
60%
html
<template>
<HLProgress :percentage="60" type="dashboard" :processing="true" id="example-progress-dashboard" />
</template>
<script setup>
import { HLProgress } from '@platform-ui/highrise'
</script>Multiple Circle Type
Race Circles
html
<script setup>
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>
<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>Stepper Type
Progress Steps
Step 2 of 4 completed
Progress Steps Outside
Step 3 of 5 completed
Progress Steps Complete
All steps completed
html
<template>
<HLProgress
id="example-progress-stepper"
:percentage="60"
type="stepper"
:max-steps="4"
label="Progress Steps"
helperText="Step 3 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>
import { HLProgress } from '@platform-ui/highrise'
</script>Customized Progress
Active Users
html
<template>
<HLProgress :percentage="50" type="circle" color="purple" id="example-progress-circle-purple">
<template #default>
<div>Active Users</div>
</template>
</HLProgress>
</template>
<script setup>
import { HLProgress } from '@platform-ui/highrise'
</script>Imports
ts
import { HLProgress } from '@platform-ui/highrise'Props
| Name | Type | Default | Description |
|---|---|---|---|
| id * | string | undefined | undefined | The id of the element |
| percentage | number | number[] | undefined | undefined | Progress percentage |
| type | 'circle' | 'line' | 'dashboard' | 'multiple-circle' | 'stepper' | 'line' | Progress type |
| processing | boolean | false | Whether to show spinning indicator |
| indeterminate | boolean | false | Whether to show indeterminate loading state |
| valuePlacement | 'inside' | 'outside' | 'inside' | Placement of the indicator |
| status | 'success' | 'error' | 'warning' | 'info' | 'default' | 'default' | Status of progress |
| showIndicator | boolean | undefined | undefined | Whether to display indicators |
| borderRadius | number | string | undefined | Border radius for line type progress |
| circleGap | number | 1 | Gap between circles for multiple-circle type |
| color | string | string[] | undefined | undefined | Progress color |
| fillBorderRadius | number | string | undefined | undefined | Fill's border radius for line type |
| gapDegree | number | 75 | Gap degree of half circle (0-360) |
| gapOffsetDegree | number | 0 | Gap offset degree |
| height | number | undefined | undefined | Height for line type progress |
| strokeWidth | number | 7 | Progress width |
| unit | string | '%' | Progress unit |
| label | string | undefined | undefined | Progress label |
| helperText | string | undefined | undefined | Helper text |
| dashboardSize | '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'sm' | Size for dashboard type |
| indicatorTextColor | string | undefined | undefined | Color of the indicator text |
| offsetDegree | number | 0 | Offset degree of the indicator |
| railColor | string | string[] | undefined | undefined | Color of the rail |
| railStyle | string | CSSProperties | (string | CSSProperties)[] | undefined | undefined | Style of the rail |
| maxSteps | number | 10 | Number of steps for stepper type (2-100) |
Slots
| Name | Parameters | Description |
|---|---|---|
| default | () | Custom content for progress indicator |