Hacktron Design System

Progress

A bar showing how far a task has progressed.

<template>  <Progress :model-value="44" /></template>

Props

Name Type Default
...propsUProgress props (modelValue, max, status, animation, ...)-

Guidelines

Do

  • Use this for a task with a known, measurable completion amount (e.g. a file upload) - pair modelValue/max with the real progress value.
  • Leave modelValue unset (or null) for an indeterminate wait where you don't know the completion percentage.

Don't

  • Don't use this for a multi-step flow with discrete named steps - use Stepper (unlabeled) or StepperVertical (labeled) instead.