@vibe-labs/design-components-progress

Progress bar (linear and radial) component tokens, styles, and TypeScript types for the Vibe Design System.

Installation

@import "@vibe-labs/design-components-progress";

import { ProgressSizes, ProgressVariants, ProgressRadialSizes } from "@vibe-labs/design-components-progress/types";
import type { ProgressStyleProps, ProgressRadialStyleProps } from "@vibe-labs/design-components-progress/types";

Contents

Tokens (progress.css)

CSS custom properties defined in @layer vibe.tokens:

Track

Token	Default
--progress-height-sm	0.25rem
--progress-height-md	0.5rem
--progress-height-lg	0.75rem
--progress-radius	--radius-full
--progress-bg	--surface-overlay

Fill

Token	Default
--progress-fill	--color-accent
--progress-fill-success	--color-success
--progress-fill-warning	--color-warning
--progress-fill-danger	--color-danger

Indeterminate

Token	Default
--progress-indeterminate-speed	1.5s

Radial

Token	Default
--progress-radial-size-sm	2rem
--progress-radial-size-md	3rem
--progress-radial-size-lg	5rem
--progress-radial-stroke-width	3px

Generated Styles (progress.g.css)

Component classes generated into @layer vibe.components.

Linear Progress

• progress — full-width track with overflow hidden
• progress-fill — width driven by --progress-value CSS variable, animated transitions
• Sizes: sm · md · lg (default: md)

Color Variants

Variant	Fill color
accent	--progress-fill (accent)
success	--progress-fill-success
warning	--progress-fill-warning
danger	--progress-fill-danger
auto	--progress-auto-color (set via JS for dynamic color based on value)

Modifiers

• indeterminate — 40% width fill with sliding animation
• striped — diagonal stripe overlay on fill
• animated — animates stripes (combine with striped)

Label

• progress-field — flex column wrapper (label + bar)
• progress-label — space-between row for label text and value
• progress-label-value — semibold value display

Radial (Circular) Progress

• progress-radial — inline-flex SVG container, rotated -90° for top-start
• progress-radial-track — background circle stroke
• progress-radial-fill — foreground arc with round linecap, animated via stroke-dashoffset
• progress-radial-label — centered absolute text overlay
• Sizes: sm · md · lg (default: md)

Keyframes

• vibe-progress-indeterminate — translateX sweep
• vibe-progress-stripes — stripe background scroll

TypeScript Types (types/)

ProgressSizes;      // ["sm", "md", "lg"]
ProgressVariants;   // ["accent", "success", "warning", "danger", "auto"]
ProgressRadialSizes; // ["sm", "md", "lg"]

interface ProgressStyleProps {
  size?: ProgressSize;
  variant?: ProgressVariant;
  indeterminate?: boolean;
  striped?: boolean;
  animated?: boolean;
}

interface ProgressRadialStyleProps {
  size?: ProgressRadialSize;
}
// + fill, field, label, label-value, radial track/fill/label interfaces

Dist Structure

File	Description
index.css	Barrel — imports tokens + generated styles
progress.css	Token definitions
progress.g.css	Generated component styles + keyframes
index.js / index.d.ts	TypeScript types + runtime constants

Dependencies

Requires tokens from @vibe-labs/design (colors, surfaces, spacing, typography, transitions, borders).

Build

npm run build

---

Usage Guide

Import

@import "@vibe-labs/design-components-progress";

import { ProgressSizes, ProgressVariants } from "@vibe-labs/design-components-progress/types";
import type { ProgressStyleProps } from "@vibe-labs/design-components-progress/types";

Variants

Attribute / Flag	Values	Notes
data-size	sm md lg	Default: md
data-variant	accent success warning danger auto	Default: accent
data-indeterminate	boolean flag	Sliding animation, ignores value
data-striped	boolean flag	Diagonal stripe overlay
data-animated	boolean flag	Animates stripes (use with striped)

Value is driven by the --progress-value CSS custom property (0–100).

Examples

Basic progress bar

<div class="progress" style="--progress-value: 60">
  <div class="progress-fill"></div>
</div>

Sized variants

<div class="progress" data-size="sm" style="--progress-value: 30">
  <div class="progress-fill"></div>
</div>
<div class="progress" data-size="md" style="--progress-value: 60">
  <div class="progress-fill"></div>
</div>
<div class="progress" data-size="lg" style="--progress-value: 90">
  <div class="progress-fill"></div>
</div>

Color variants

<div class="progress" data-variant="success" style="--progress-value: 100">
  <div class="progress-fill"></div>
</div>
<div class="progress" data-variant="warning" style="--progress-value: 60">
  <div class="progress-fill"></div>
</div>
<div class="progress" data-variant="danger" style="--progress-value: 25">
  <div class="progress-fill"></div>
</div>

Indeterminate (loading state)

<div class="progress" data-indeterminate>
  <div class="progress-fill"></div>
</div>

Striped and animated

<div class="progress" data-striped data-animated style="--progress-value: 75">
  <div class="progress-fill"></div>
</div>

Progress with label

<div class="progress-field">
  <div class="progress-label">
    <span>Uploading files</span>
    <span class="progress-label-value">75%</span>
  </div>
  <div class="progress" style="--progress-value: 75">
    <div class="progress-fill"></div>
  </div>
</div>

Radial (circular) progress

<div class="progress-radial" data-size="md" style="--progress-value: 65">
  <svg viewBox="0 0 32 32">
    <circle class="progress-radial-track" cx="16" cy="16" r="14" />
    <circle class="progress-radial-fill" cx="16" cy="16" r="14" />
  </svg>
  <span class="progress-radial-label">65%</span>
</div>

With Vue

<template>
  <div class="progress-field">
    <div class="progress-label">
      <span>{{ label }}</span>
      <span class="progress-label-value">{{ value }}%</span>
    </div>
    <div
      class="progress"
      :data-size="size"
      :data-variant="variant"
      :data-indeterminate="indeterminate || undefined"
      :style="{ '--progress-value': value }"
    >
      <div class="progress-fill"></div>
    </div>
  </div>
</template>