Progress Bar

The ProgressBar component provides a flexible and customizable way to display status, labels, or other metadata with various color variants and sizes.

Installation

pnpm

pnpm i @vue-interface/progress-bar

yarn

yarn add @vue-interface/progress-bar

npm

npm i @vue-interface/progress-bar

bun

bun i @vue-interface/progress-bar

Tailwind Setup

@import '@vue-interface/progress-bar';

Basic Usage

To create a progress bar component, use the <ProgressBar> component. Use the value prop to set the progress and show-value to display the progress numerically.

Progress Bar

0%

<ProgressBar :value="progress"></ProgressBar>
<ProgressBar :value="progress" label="Progress Bar"></ProgressBar>
<ProgressBar :value="progress" show-value></ProgressBar>
<ProgressBar :value="50" striped></ProgressBar>
<ProgressBar :value="50" striped animated></ProgressBar>

Color Variants

The progress-bar component supports eight standard color variants: primary, secondary, success, danger, warning, info, light, dark. Use the syntax: progress-bar-[variant].

Show Code

<ProgressBar :value="50" class="progress-bar-primary"></ProgressBar>
<ProgressBar :value="50" class="progress-bar-secondary"></ProgressBar>
<ProgressBar :value="50" class="progress-bar-success"></ProgressBar>
<ProgressBar :value="50" class="progress-bar-danger"></ProgressBar>
<ProgressBar :value="50" class="progress-bar-warning"></ProgressBar>
<ProgressBar :value="50" class="progress-bar-info"></ProgressBar>
<ProgressBar :value="50" class="progress-bar-dark"></ProgressBar>
<ProgressBar :value="50" class="progress-bar-light"></ProgressBar>

Custom Colors

Customize the color of the ProgressBar component with the Tailwind color palette by using the class: progress-bar-[color].

Show Code

<ProgressBar :value="50" class="progress-bar-amber-500"></ProgressBar>
<ProgressBar :value="50" class="progress-bar-green-500"></ProgressBar>
<ProgressBar :value="50" class="progress-bar-purple-500"></ProgressBar>
<ProgressBar :value="50" class="progress-bar-neutral-500"></ProgressBar>

Sizes

Customize the size of a ProgressBar using a predetermined size, tailwind's numeric sizing classes, or an arbitrary CSS length unit.

Predetermined Sizes

The size can be customized using a predetermined size prop: 2xs, xs, sm, md, lg, xl, 2xl, 3xl, 4xl, 5xl. Use the syntax: progress-bar-[size].

Show Code

<ProgressBar :value="50" size="progress-bar-2xs"></ProgressBar>
<ProgressBar :value="50" size="progress-bar-xs"></ProgressBar>
<ProgressBar :value="50" size="progress-bar-sm"></ProgressBar>
<ProgressBar :value="50" size="progress-bar-md"></ProgressBar>
<ProgressBar :value="50" size="progress-bar-lg"></ProgressBar>
<ProgressBar :value="50" size="progress-bar-xl"></ProgressBar>
<ProgressBar :value="50" size="progress-bar-2xl"></ProgressBar>
<ProgressBar :value="50" size="progress-bar-3xl"></ProgressBar>
<ProgressBar :value="50" size="progress-bar-4xl"></ProgressBar>
<ProgressBar :value="50" size="progress-bar-5xl"></ProgressBar>

Tailwind Sizes

For more granular control over ProgressBar sizes, use Tailwind's numeric sizing scale classes: progress-bar-1 - progress-bar-96.

Show Code

<ProgressBar :value="50" size="progress-bar-3"></ProgressBar>
<ProgressBar :value="50" size="progress-bar-4"></ProgressBar>
<ProgressBar :value="50" size="progress-bar-5"></ProgressBar>

Arbitrary sizes

For precise sizing, specify exact pixel values using the syntax progress-bar-[Npx] or any other CSS length units (rem, em, mm, etc.).

Show Code

<ProgressBar :value="50" size="progress-bar-[16px]"></ProgressBar>
<ProgressBar :value="50" size="progress-bar-[1.5rem]"></ProgressBar>

Striped

Add the striped prop to apply a striped gradient over the progress bar's background color.

Show Code

<ProgressBar :value="50" class="progress-bar-primary" striped></ProgressBar>
<ProgressBar :value="50" class="progress-bar-secondary" striped></ProgressBar>
<ProgressBar :value="50" class="progress-bar-success" striped></ProgressBar>
<ProgressBar :value="50" class="progress-bar-danger" striped></ProgressBar>
<ProgressBar :value="50" class="progress-bar-warning" striped></ProgressBar>
<ProgressBar :value="50" class="progress-bar-info" striped></ProgressBar>
<ProgressBar :value="50" class="progress-bar-dark" striped></ProgressBar>
<ProgressBar :value="50" class="progress-bar-light" striped></ProgressBar>

Striped & Animated

Add both striped and animated props to animate the stripes from right to left.

Show Code

<ProgressBar :value="50" class="progress-bar-primary" striped animated></ProgressBar>
<ProgressBar :value="50" class="progress-bar-secondary" striped animated></ProgressBar>
<ProgressBar :value="50" class="progress-bar-success" striped animated></ProgressBar>
<ProgressBar :value="50" class="progress-bar-danger" striped animated></ProgressBar>
<ProgressBar :value="50" class="progress-bar-warning" striped animated></ProgressBar>
<ProgressBar :value="50" class="progress-bar-info" striped animated></ProgressBar>
<ProgressBar :value="50" class="progress-bar-dark" striped animated></ProgressBar>
<ProgressBar :value="50" class="progress-bar-light" striped animated></ProgressBar>

API

Props

Prop	Type	Default	Description
value	string	0	The value of the progress bar.
label	string	undefined	The label to display.
show-value	boolean	false	Display the progress numerically.
size	string	'progress-bar-md'	Progress bar size.
striped	boolean	false	Add stripes to the progress bar.
animated	boolean	false	Animate the stripes.

Slots

Slot	Description
label	Optional slot to override the default label rendering. Exposes label and value bindings.