Logo

Midnight Owl UI

Progress Bar

Stable v1.0.2

A progress bar with determinate and indeterminate modes, optional striping, and a few ways to show the current value as text.

Interactive Playground

Experiment with values, sizes, stripes, and layout positioning.

Data
Appearance
Medium (md)
Primary
Text Elements
Top Right
States & Animations
System Storage65%
Live Source Code
<ProgressBar
  v-model="progressValue"
  id="storage-progress"
  label="System Storage"
  size="md"
  showValue
/>

Implementation Examples

Top Alignment0%
Inside Alignment
Right Alignment
0%

1. Versatile Text Layouts

By utilizing the valuePosition prop, you can seamlessly place the percentage indicator above, inside, or directly beside the tracking bar. 

<ProgressBar
  v-model="uploadProgress"
  label="Top Alignment"
  size="sm"
  showValue
  valuePosition="top"
/>
<ProgressBar
  v-model="uploadProgress"
  label="Inside Alignment"
  size="lg"
  variant="success"
  showValue
  valuePosition="inside"
/>
<ProgressBar
  v-model="uploadProgress"
  label="Right Alignment"
  size="md"
  variant="warning"
  showValue
  valuePosition="right"
/>
SSD Storage Utilization
42 GB / 128 GB
Monthly Quota Exceeded
110 API Calls

2. Custom Formatters & Defensive Math

Notice the bottom bar: We bound v-model="110" and max="100". The component's internal math clamped the visual width to 100% to prevent layout breakage, but your formatter still displays the exact 110 value. 

<ProgressBar
  :modelValue="42"
  :max="128"
  label="SSD Storage Utilization"
  variant="info"
  showValue
  valuePosition="right"
  :valueFormatter="(val, max) => `${val} GB / ${max} GB`"
/>

<ProgressBar
  :modelValue="110"
  :max="100"
  label="Monthly Quota Exceeded"
  variant="danger"
  showValue
  valuePosition="bottom"
  :valueFormatter="(val) => `${val} API Calls`"
/>

API Reference

Props

Name
Type
Default
Description
id
string
auto-generated
Base id used to derive the label's element id (`<id>-label`), which the progress track's `aria-labelledby` points at. Only meaningful when `label` is set; falls back to a unique `adv-progress-<useId>` value when omitted.
v-model
number
0
The bound progress value. Safely clamped between 0 and the max prop.
max
number
100
The maximum value corresponding to 100% completion.
label
string
undefined
Text displayed above the progress bar.
showValue
boolean
false
Displays the percentage or formatted value.
valuePosition
"top" | "bottom" | "inside" | "right"
"top"
Determines where the value text renders relative to the bar.
valueFormatter
function
undefined
Custom function to format the displayed string. E.g., `(val, max) => `${val} GB / ${max} GB``.
size
"xs" | "sm" | "md" | "lg" | "xl"
"sm"
Controls the height of the bar.
variant
string
"primary"
Color theme applied to the progress fill.
striped
boolean
false
Applies a diagonal striped CSS background pattern.
animated
boolean
false
Animates the striped pattern continuously. Requires `striped` to be true.
indeterminate
boolean
false
Ignores `v-model` and displays a continuous sliding animation for unknown load times.