Progress

This component requires the FyskProvider. See Quick Start →

Preview

Progress

TypeScript

Loading Data

66%

Installation

bash

1npx shadcn@latest add https://fysk.dev/r/progress.json

Usage

tsx

1import { Progress } from "@/components/ui"
2
3<Progress value={50} />

Examples

Progress Bar Styles/Variants

Showcasing different styles and variants.

Component

TypeScript

Basic Progress

13%

Buffering...

45%

Multi-color Gradient

80%

Stacked Segments

Finished Task

100%

Failed Task

20%

Label Position

Showcasing different label positions.

Component

TypeScript

Bottom Label

Loading Data

13%

Top Label

Loading Data

13%

Inside Label

Interactive

Showcasing interactive features.

Component

TypeScript

Seekable Progress

13%

Features

Rich Variants: Support for striped, gradient (with custom colors), glass, and neon styles.
Buffer Support: Ideal for video players or async loading where a background "buffered" state exists.
Stacked Segments: Support for displaying multiple colored data points in a single bar.
State Aware: Built-in support for success, error, and loading states with automatic icon display.
Interactive: Support for tooltips on hover and click events to seek/set progress.
Animations: Fluid CSS transitions for value changes and specialized indeterminate animations.

Props

Prop	Type	Default	Description
`value`	`number`	`0`	Completion percentage (0-100).
`variant`	`"default" \| "gradient" \| "striped" \| "glow" \| "glass" \| "neon"`	`"default"`	Visual style of the progress bar.
`size`	`"xs" \| "sm" \| "md" \| "lg" \| "xl"`	`"md"`	Height of the bar.
`shape`	`"rounded" \| "square" \| "soft"`	`"rounded"`	Corner radius style.
`state`	`"idle" \| "loading" \| "success" \| "error"`	`"idle"`	Status color and icon feedback.
`bufferValue`	`number`	-	Secondary layer shown behind the main value.
`label`	`string`	-	Text label for the progress bar.
`labelPosition`	`"top" \| "bottom" \| "inside"`	`"bottom"`	Placement of the label and value text.
`formatValue`	`(value: number) => string`	-	Custom formatter for the displayed value.
`showValue`	`boolean`	`false`	Shows the percentage/formatted text.
`icon`	`React.ReactNode \| "auto"`	-	Icon suffix. `"auto"` uses state-based icons.
`indeterminate`	`boolean`	`false`	Shows an infinite loading animation.
`segments`	`ProgressSegment[]`	-	Array for a multi-color segmented progress bar.
`milestones`	`ProgressMilestone[]`	-	Markers to display at specific progress points.
`showMilestones`	`boolean`	`false`	Whether to display the milestone markers.
`colors`	`string[]`	-	Custom colors for the `gradient` variant.
`gradientDirection`	`string`	`"to right"`	Direction for the gradient variant.
`stripedIndicatorSize`	`number`	`20`	Spacing of stripes for the `striped` variant.
`interactive`	`boolean`	`false`	Enables hover effects and click-to-seek.
`showTooltip`	`boolean`	`false`	Shows a tooltip with the value on hover.
`onProgressClick`	`(pct: number) => void`	-	Callback when bar is clicked.
`indicatorClassName`	`string`	-	Custom CSS class for the inner bar.

Types

ProgressSegment

interface ProgressSegment {
  value: number; // Percentage of this segment
  color?: string; // Background color
  label?: string; // Accessibility label/title
  className?: string; // Custom styling
}

ProgressMilestone

interface ProgressMilestone {
  value: number; // Position (0-100)
  label?: string; // Text label shown above milestone
  color?: string; // Marker color
}

Accepts all standard Radix Progress and HTML attributes.