Progressbar

<bh-progressbar>

The Progress Bar component provides a visual indicator of completion status for tasks, processes, or operations. It’s highly customizable with various styles, animations, and display options.

Features

Multiple size variations (xs, sm, md, lg, xl)
Color variants (primary, secondary, success, danger, warning, info)
Animation and striped effects
Value display options
Customizable appearance with elevation, shadows, and border radius
Indeterminate state for unknown progress
Label positioning options

<bh-progressbar value="65" show-value></bh-progressbar>

Interactive Playground

Experiment with different properties of the progress bar component.

Basic Properties

Value
Height
Variant
Label

Toggle Options

Show Value	Striped
Animated	Elevation
Rounded	Indeterminate

Custom Colors

Progress Color
Track Color

Size Variations

The component supports both named sizes and custom pixel values.

Preview
HTML

Extra Small:

Small:

Medium:

Large:

Extra Large:

<!-- Extra Small (4px) -->
<bh-progressbar value="60" height="xs" show-value></bh-progressbar>

<!-- Small (8px) -->
<bh-progressbar value="65" height="sm" show-value></bh-progressbar>

<!-- Medium (16px) -->
<bh-progressbar value="70" height="md" show-value></bh-progressbar>

<!-- Large (24px) -->
<bh-progressbar value="75" height="lg" show-value></bh-progressbar>

<!-- Extra Large (32px) -->
<bh-progressbar value="80" height="xl" show-value></bh-progressbar>

<!-- Custom Size -->
<bh-progressbar value="50" height="20px" show-value></bh-progressbar>

Color Variants

Preview
HTML

<bh-progressbar value="35" variant="primary" label="Primary"></bh-progressbar>
<bh-progressbar value="45" variant="success" label="Success"></bh-progressbar>
<bh-progressbar value="55" variant="warning" label="Warning"></bh-progressbar>
<bh-progressbar value="65" variant="danger" label="Danger"></bh-progressbar>
<bh-progressbar value="75" variant="info" label="Info"></bh-progressbar>
<bh-progressbar value="85" variant="secondary" label="Secondary"></bh-progressbar>

Advanced Styling

Customize the appearance with elevation, shadows, custom colors, and more.

Preview
HTML

<!-- Gradient with Elevation -->
<bh-progressbar
  value="65"
  height="24px"
  color="linear-gradient(90deg, #00C9FF 0%, #92FE9D 100%)"
  elevation
  shadow="0 3px 10px rgba(0, 201, 255, 0.3)"
  show-value
  rounded>
</bh-progressbar>

<!-- Animated Striped with Custom Color -->
<bh-progressbar
  value="50"
  height="32px"
  striped
  animated
  color="#8A2BE2"
  elevation
  show-value
  rounded>
</bh-progressbar>

<!-- Custom Track Color and Border Radius -->
<bh-progressbar
  value="80"
  height="40px"
  color="#ff3366"
  track-color="#ffddee"
  elevation
  shadow="0 4px 15px rgba(255, 51, 102, 0.3)"
  border-radius="4px"
  show-value>
</bh-progressbar>

Indeterminate Progress

Use the indeterminate property when the progress value is unknown.

Preview
HTML

<bh-progressbar indeterminate height="md" label="Loading..."></bh-progressbar>

Properties

Property	Type	Description
`animated`	`boolean`	Adds animation to the progress bar
`borderRadius`	`string`	Custom border radius (overrides rounded)
`color`	`string`	Custom color for the progress bar (CSS color or gradient)
`elevation`	`boolean`	Adds a subtle shadow effect
`height`	`string`	Height of the progress bar (xs, sm, md, lg, xl, or custom value)
`indeterminate`	`boolean`	Shows an animated indeterminate progress state
`label`	`string`	Text label for the progress bar
`labelPosition`	`string`	Position of the label (“top” or “bottom”)
`max`	`number`	Maximum value
`min`	`number`	Minimum value
`rounded`	`boolean`	Applies rounded corners
`shadow`	`string`	Custom shadow value (used with elevation)
`showValue`	`boolean`	Shows the current value
`striped`	`boolean`	Adds a striped pattern
`thickness`	`string`	Alternative to height
`trackColor`	`string`	Custom color for the track
`value`	`number`	Current progress value
`valuePrefix`	`string`	Prefix for the displayed value
`valueSuffix`	`string`	Suffix for the displayed value
`variant`	`string`	Color variant (primary, secondary, success, danger, warning, info)
`width`	`string`	Width of the progress bar

Size Reference

Size Name	Equivalent
`xs`	4px
`sm`	8px
`md`	16px
`lg`	24px
`xl`	32px

JavaScript API

You can programmatically control the progress bar using JavaScript:

// Get the progress bar element
const progressBar = document.querySelector('bh-progressbar');

// Update the value
progressBar.value = 75;

// Toggle animation
progressBar.animated = true;

// Toggle striped pattern
progressBar.striped = true;

// Change the color
progressBar.color = '#ff3366';

// Change the size
progressBar.height = 'lg';