Caret-Tui

ProgressBar

A component to display linear progress.

ProgressBar provides visual feedback for operations that take a significant amount of time. It supports theme variants, optional labels, and percentage display.

Usage

import { ProgressBar } from 'caret-tui';

const App = () => (
  <ProgressBar 
    label="Downloading updates..." 
    value={45} 
    variant="success" 
  />
);

Props

PropTypeDefaultDescription
valuenumber-The current progress value (0 to 100).
widthnumber30The character width of the progress bar.
variant'primary' | 'secondary' | 'success' | 'warning' | 'error''primary'The visual color variant.
labelstring-An optional label displayed above the bar.
showValuebooleantrueWhether to display the percentage text at the end of the bar.

On this page