CProgressLinear

Linear progress bar. Shows determinate progress from 0 to 100, an optional buffer, or an endless animation in indeterminate mode.

Basic usage

value sets the bar width in percent and is clamped to the 0–100 range.

Show code

<script setup lang="ts">
import { ref } from 'vue'

const value = ref(40)
</script>

<template>
  <c-progress-linear :value="value" height="8" />

  <c-btn @click="value = Math.max(0, value - 10)">-10</c-btn>
  <c-btn @click="value = Math.min(100, value + 10)">+10</c-btn>
</template>

Colors and height

color accepts a palette token (teal, green-darken-1) or a raw color (#fa5a5a, rgb(...), var(...)) — there is no predefined set. The bg-* class lands on the bar and the buffer; the track stays on the theme tokens and can be recolored through a preset (the background zone). height sets the bar height in pixels.

Show code

<c-progress-linear color="indigo" value="80" height="4" />
<c-progress-linear color="teal" value="65" height="6" />
<c-progress-linear color="deep-purple-lighten-1" value="50" height="8" />
<c-progress-linear color="green-darken-1" value="90" height="10" />
<c-progress-linear color="#FFA726" value="35" height="12" />
<c-progress-linear color="#fa5a5a" value="20" height="14" />

A raw color must be a literal

Arbitrary classes (bg-[#fa5a5a]) are generated by utils-jit via a static source scan: color="#fa5a5a" works, :color="someVar" with a raw value does not. Palette tokens are unaffected. See Custom attrs for details.

Buffer

buffer-value renders a semi-transparent bar ahead of the main one — useful for streaming and preloading scenarios.

Show code

<template>
  <c-progress-linear :value="value" :buffer-value="buffer" height="8" />
  <c-progress-linear color="green-darken-1" value="30" buffer-value="70" height="8" />
</template>

Indeterminate

Endless animation for operations with unknown duration.

Show code

<c-progress-linear indeterminate height="4" />
<c-progress-linear indeterminate color="teal" height="6" />
<c-progress-linear indeterminate color="#7C4DFF" height="8" />

Presets

CProgressLinear supports the preset system. Zones map 1:1 to the DOM and cover every colorable element: root, background (track), buffer, and bar (applied to both bars in indeterminate mode) — the track, buffer, and bar are recolored with bg-* utilities. States: indeterminate and complete (value ≥ 100); indeterminate takes precedence.

In the demo below the bar is indigo while loading and turns green once value reaches 100 — no conditional classes in the template, the preset resolves the state on its own:

Show code

// main.ts — register the preset once
createVuelandUI({
  presets: {
    progress: {
      download: {
        base: { bar: ['bg-indigo'] },
        complete: { bar: ['bg-green'] },
      },
    },
  },
})

<template>
  <c-progress-linear preset="progress.download" :value="value" height="8" />
</template>

Accessibility

The root element gets role="progressbar" with aria-valuemin="0", aria-valuemax="100", and aria-valuenow set to the current value. In indeterminate mode aria-valuenow is omitted, which matches the WAI-ARIA progressbar pattern.

---

API

Props

Prop

Type

Default

Description

value

number | string

0

Bar width in percent, clamped to 0–100

bufferValue

number | string

—

Buffer bar width in percent, clamped to 0–100

height

number | string

4

Bar height (px)

indeterminate

boolean

false

Endless animation mode

color

string

—

Palette token (teal) or raw color (#fa5a5a, rgb(...), var(...)); defaults to the theme primary

preset

string

—

Preset name (dot path) from the registry

CSS variables

Variable

Default

--c-progress-linear-color

var(--c-sys-color-primary)

--c-progress-linear-track-color

var(--c-sys-color-primary-container)