Fluxo UIFluxo UIv0.4.1

ProgressBar

A versatile progress indicator with multiple variants, sizes, layouts, and support for indeterminate, buffered, and multi-segment modes.

Basic

Basic Progress Bar

Simple progress bars with different values

import { ProgressBar } from 'fluxo-ui';

function MyComponent() {
  return (
    <div className="space-y-4">
      <ProgressBar value={25} />
      <ProgressBar value={50} />
      <ProgressBar value={75} />
      <ProgressBar value={100} />
    </div>
  );
}

Variants

Color Variants

All available color variants

Default
70%
Primary
70%
Success
70%
Warning
70%
Danger
70%
Info
70%

Sizes

Size Options

Five size options from extra small to extra large

Extra Small
60%
Small
60%
Medium
60%
Large
60%
Extra Large
60%

Layouts

Layout Styles

Different visual styles for the progress bar

Default
65%
Rounded
65%
Sharp
65%
Striped
65%
Animated Striped
65%

Labels & Values

Labels & Custom Templates

Progress bars with labels and custom value templates

Default Value
45%
Storage UsedFree tier
750 / 1000 MB
Tasks Completed
3 of 5 tasks
Project Alpha
88% complete

Indeterminate

Indeterminate Mode

For when progress duration is unknown

Loading data...
Processing...
Syncing...

Buffer

Buffered Progress

Progress with buffer indicator for streaming content

Video Playback
35%
Streaming
4%

Multi Segment

Multi-Segment Progress

Stacked segments representing multiple values

Test Results
60 / 100 tests
Disk Space
60 GB / 100 GB

Dynamic Progress

Animated Progress

Live updating progress bar

Uploading...
4%
Compiling...
4%

Import

import { ProgressBar } from 'fluxo-ui';

Props

value
number"-"

Current progress value

max
number"100"

Maximum value

min
number"0"

Minimum value

variant
'default' | 'primary' | 'success' | 'warning' | 'danger' | 'info'"'primary'"

Color variant

size
'xs' | 'sm' | 'md' | 'lg' | 'xl'"'md'"

Bar height/text size

layout
'default' | 'rounded' | 'sharp' | 'striped' | 'animated'"'default'"

Visual layout style

showValue
boolean"false"

Show the progress value text

valueTemplate
string | ((value, max) => ReactNode)

Custom value display. Use {value}, {max}, {percent} placeholders or a render function

label
ReactNode

Label displayed above the bar

sublabel
ReactNode

Secondary label next to the label

indeterminate
boolean"false"

Show indeterminate animation

buffer
number

Buffer value for buffered progress display

multipleValues
ProgressBarSegment[]

Array of segments for stacked progress

className
string

Additional CSS class

disabled
boolean"false"

Disabled state with reduced opacity

ariaLabel
string

Accessible label

id
string

HTML id attribute

Features

Multiple Variants

Six color variants including primary, success, warning, danger, info, and default

Flexible Sizing

Five size options from xs to xl to fit any UI context

Indeterminate Mode

Animated indeterminate state for unknown progress duration

Buffer Support

Buffered progress display for streaming or multi-phase operations

Multi Segment

Stacked segments for showing multiple values in a single bar

Custom Templates

Value template with placeholders or render functions for full control