ProgressMetric

A horizontal progress bar component for displaying progress towards a goal. Ideal for tracking completion, resource usage, or any linear progress.

Features

Horizontal progress bar
Customizable height
Optional percentage display
Customizable colors
Label display
Responsive design

Examples

Basic ProgressMetric

CPU Usage 65%

0 100

<script>
  import { ProgressMetric } from '$lib';
</script>

<ProgressMetric
  label="CPU Usage"
  value={65}
  max={100}
  color="primary"
  showPercentage={true}
/>

Props

Prop	Type	Default	Description
`label`	`string`	Required	Progress label
`value`	`number`	Required	Current progress value
`max`	`number`	Required	Maximum value
`color`	`string`	'primary'	Progress bar color
`showPercentage`	`boolean`	false	Show percentage display
`height`	`'sm' \| 'md' \| 'lg'`	'md'	Progress bar height

Best Practices

Use for tracking progress towards goals
Include percentage display for clarity
Use colors to indicate status
Keep labels concise and meaningful