ProgressBar

Visual progress indicator with automatic status-based coloring. Useful for budget tracking, task completion, and loading states.

Installation

typescript

import { ProgressBar } from '@happyvertical/smrt-svelte';

Basic Usage

Simple progress bar with automatic color based on percentage.

svelte

<ProgressBar value={45} />

With Label

Show the percentage above the bar.

65%

svelte

<ProgressBar value={65} showLabel />

Auto Status Colors

Colors change automatically based on percentage thresholds.

Healthy (under 75%)

50%

Warning (75-89%)

80%

Critical (90%+)

95%

svelte

<ProgressBar value={50} showLabel />  <!-- Healthy (under 75%) -->
<ProgressBar value={80} showLabel />  <!-- Warning (75-89%) -->
<ProgressBar value={95} showLabel />  <!-- Critical (90%+) -->

Over Budget

When value exceeds max, shows "over" indicator.

100% Over by 20

svelte

<ProgressBar value={120} max={100} showLabel />

Custom Range

Use any max value, not just 100.

750 / 1,000

svelte

<ProgressBar value={750} max={1000} showValue />

Sizes

Available in small, medium, and large sizes.

Small

60%

Medium

60%

Large

60%

svelte

<ProgressBar value={60} size="sm" showLabel />
<ProgressBar value={60} size="md" showLabel />
<ProgressBar value={60} size="lg" showLabel />

Custom Label

Override the label text.

$7,500 of $10,000

svelte

<ProgressBar value={75} showLabel label="$7,500 of $10,000" />

Forced Status

Override auto status with a specific color.

30%

svelte

<ProgressBar value={30} status="healthy" showLabel />
<ProgressBar value={30} status="warning" showLabel />
<ProgressBar value={30} status="critical" showLabel />

Props

Prop	Type	Default	Description
`value` *	`number`	-	Current value (0-100 or custom range)
`max`	`number`	`100`	Maximum value
`status`	`'default' \| 'healthy' \| 'warning' \| 'critical' \| 'over'`	`'default'`	Status determines color (auto-detected if default)
`showLabel`	`boolean`	`false`	Show percentage label
`label`	`string`	-	Custom label text
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Size variant
`showValue`	`boolean`	`false`	Show value over max (e.g., "75/100")

TypeScript

typescript

import { ProgressBar } from '@happyvertical/smrt-svelte';

interface Props {
  value: number;
  max?: number;
  status?: 'default' | 'healthy' | 'warning' | 'critical' | 'over';
  showLabel?: boolean;
  label?: string;
  size?: 'sm' | 'md' | 'lg';
  showValue?: boolean;
}