Sequence
docs
React components

Progress bar

A customized progress bar with numerical indicator and striped background.

Overview

The ProgressBar component visualizes completion percentage. It features a filled bar with a number counter inside and a striped background for the empty portion.

Usage

import { ProgressBar } from '@/components/core/progress-bar';

function Loading() {
  return <ProgressBar value={65} className="w-full" />;
}

Props

PropTypeDefaultDescription
valuenumberRequiredThe progress value (0-100).
className?string-Optional CSS class names.

On this page