Progressbar

<bh-progressbar> | BharatProgressbar

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.

Open in

Basic Usage

Preview

Open in

HTML

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

React

import React from 'react';
import { BharatProgressBar } from 'bharat-ui/react/components/progressbar';

function App() {
return <BharatProgressBar value="65" show-value></BharatProgressBar>
}
export default App;

Interactive Playground

Experiment with different properties of the progress bar component.

Open in

Basic Properties

Value
Height	Extra Small (xs)Small (sm)Medium (md)Large (lg)Extra Large (xl)
Variant	PrimarySecondarySuccessDangerWarningInfo
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

Open in

Extra Small:

Small:

Medium:

Large:

Extra Large:

HTML

<!-- 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>

React

import React from 'react';
import { BharatProgressBar } from 'bharat-ui/react/components/progressbar';

function App() {
return (
  <>
    <BharatProgressBar value="60" height="xs" show-value></BharatProgressBar>

    <BharatProgressBar value="65" height="sm" show-value></BharatProgressBar>

    <BharatProgressBar value="70" height="md" show-value></BharatProgressBar>


    <BharatProgressBar value="75" height="lg" show-value></BharatProgressBar>

    <BharatProgressBar value="80" height="xl" show-value></BharatProgressBar>

    <BharatProgressBar value="50" height="20px" show-value></BharatProgressBar>

  </>

);
}
export default App;

Color Variants

Preview

Open in

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>

React

import React from 'react';
import { BharatProgressBar } from 'bharat-ui/react/components/progressbar';

function App() {
return (
  <>
     <BharatProgressBar value="35" variant="primary" label="Primary"></BharatProgressBar>
    <BharatProgressBar value="45" variant="success" label="Success"></BharatProgressBar>
    <BharatProgressBar value="55" variant="warning" label="Warning"></BharatProgressBar>
    <BharatProgressBar value="65" variant="danger" label="Danger"></BharatProgressBar>
    <BharatProgressBar value="75" variant="info" label="Info"></BharatProgressBar>
    <BharatProgressBar value="85" variant="secondary" label="Secondary"></BharatProgressBar>

  </>

);
}
export default App;

Advanced Styling

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

Preview

Open in

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>

React

import React from 'react';
import { BharatProgressBar } from 'bharat-ui/react/components/progressbar';

function App() {
return (
  <>
     <BharatProgressBar
      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>
    </BharatProgressBar>


    <BharatProgressBar
      value="50"
      height="32px"
      striped
      animated
      color="#8A2BE2"
      elevation
      show-value
      rounded>
    </BharatProgressBar>

    <BharatProgressBar
      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>
    </BharatProgressBar>

  </>

);
}
export default App;

Indeterminate Progress

Use the indeterminate property when the progress value is unknown.

Preview

Open in

HTML

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

React

import React from 'react';
import { BharatProgressBar } from 'bharat-ui/react/components/progressbar';

function App() {
return <BharatProgressBar indeterminate height="md" label="Loading..."></BharatProgressBar>

}
export default App;

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