Overview

About

Getting Started

Layout

Box

Flex

Grid

Components

Accordion

Badge

Button

Checkbox

Panel

Portal

Progress Bar

Select

Skeleton

Separator

Switch

Theme

Tooltip

Properties

Color

Margin

Padding

Radius

Size

Spacing

Progress Bar Component

A progress bar component to display single or stacked progress indicators.

import { ProgressBar } from "@locus-ui/components";import styles from "./styles.css";
<ProgressBar.Root variant="muted" value={0.5} className="w-48" />

View Source

Anatomy

Import the component and its parts:

Anatomy

import { ProgressBar } from "@locus-ui/components";
<ProgressBar.Root>  <ProgressBar.Fill /></ProgressBar.Root>

Examples

Variants

Progress bar components come with three built in variants, solid, outlined, and muted.

Solid

Outlined

Muted

variants.tsx

import { ProgressBar } from "@locus-ui/components";
const variants = ["solid", "outlined", "muted"];
return variants.map((variant) => (  <ProgressBar.Root    key={variant}    variant={variant}    value={0.5}    className="w-48"  />));

Sizes

To manage the size of the progress bar you can provide a size through the size prop.

sizes.tsx

import { ProgressBar } from "@locus-ui/components";
const sizes = ["xs", "sm", "md", "lg", "xl"];
return sizes.map((size) => (  <ProgressBar.Root    key={size}    size={size}    value={0.5}    variant="muted"    className="w-48"  />

Colors

The progress bar component uses the color prop to allow for predefined and custom colors.

Primary

Secondary

Tertiary

Success

Danger

Warning

Info

colors.tsx

import { ProgressBar } from "@locus-ui/components";
const colors = [  "primary", "secondary", "tertiary",  "success", "danger", "warning", "info",];
return colors.map((color) => (  <ProgressBar.Root    value={0.5}    color={color}    variant="muted"

Stacking

Use ProgressBar.Fill children to create stacked progress bars with multiple segments.

stacking.tsx

import { ProgressBar } from "@locus-ui/components";
<ProgressBar.Root className="w-48" variant="solid" size="xl">  <ProgressBar.Fill value={0.3} color="primary" />  <ProgressBar.Fill value={0.2} color="secondary" />  <ProgressBar.Fill value={0.1} color="tertiary" /></ProgressBar.Root>

Over Stacking

When stacked fill values exceed 1, the progress bar gracefully handles overflow.

over-stacking.tsx

import { ProgressBar } from "@locus-ui/components";
<ProgressBar.Root className="w-48" variant="solid" size="xl">  <ProgressBar.Fill value={0.5} color="primary" />  <ProgressBar.Fill value={0.4} color="secondary" />  <ProgressBar.Fill value={0.3} color="tertiary" /></ProgressBar.Root>