Progress

A determinate bar for a known percent. Not a spinner and not a gauge.

Default

value and model-value are aliases. max defaults to 100.


        
          1
          
          <Progress :value="40" />
        

          2
          
          <Progress :model-value="80" />

Types

type locks the fill to a status color. Use it when the meaning is already known.


        
          1
          
          <Progress :value="70" type="success" />
        

          2
          
          <Progress :value="70" type="error" />
        

          3
          
          <Progress :value="70" type="warning" />
        

          4
          
          <Progress :value="70" type="secondary" />

Colors

colors is a threshold map: the fill uses the last key the percent has crossed.


        
          1
          
          <Progress
        

          2
          
            :value="85"
        

          3
          
            :colors="{
        

          4
          
              0: 'var(--ds-blue-700)',
        

          5
          
              40: 'var(--ds-amber-700)',
        

          6
          
              80: 'var(--ds-red-700)',
        

          7
          
            }"
        

          8
          
          />

Stops

stops draw ticks on the track. tooltip wraps each tick. aria-label is used when there is no tooltip.


        
          1
          
          <Progress
        

          2
          
            :value="50"
        

          3
          
            :stops="[
        

          4
          
              { value: 25, tooltip: 'Warmup' },
        

          5
          
              { value: 75, tooltip: 'Soft limit' },
        

          6
          
            ]"
        

          7
          
          />

Size

Default height is 4px. width and height accept a number (px) or any CSS length.


        
          1
          
          <Progress :value="60" :width="200" />
        

          2
          
          <Progress :value="60" :height="8" />

Best practices

Progress is for a known fraction: upload, quota, a build step with a percent. An unknown wait is Spinner or Loading Dots. A score is Gauge.
Pair the bar with visible numbers nearby — 873 MB / 10 GB. The bar alone is not a value.
type is a fixed status. colors is for a bar that changes meaning as it fills, such as quota headroom.
Stops mark policy thresholds, not decoration. Give each one a tooltip the user can read on hover.
Do not animate the value yourself on every frame. Pass the latest percent and let the indicator transition.