Progress

Progress indicators including bar, circle, dots, and stepper variants.

Open in Storybook

ProgressBar — Interactive Demo

65%

Value: 65%

ProgressDots

Step-based dots

Components

Component	Use Case
ProgressBar	Linear progress with percentage
ProgressCircle	Circular progress indicator
ProgressDots	Step-based dot indicators
Stepper	Multi-step process navigation

Usage

<script setup>
import { ProgressBar } from '@yellowcard/b2b-design-system';
</script>

<template>
  <ProgressBar :value="65" showLabel labelText="Uploading..." />
</template>

ProgressBar Props

Prop	Type	Default	Description
value*	number	—	Progress value (0-100)
showLabel	boolean	false	Show label text
labelText	string	—	Custom label text
fullWidth	boolean	false	Stretch to full width
indeterminate	boolean	false	Indeterminate loading animation
ariaLabel	string	—	Accessible label