LoadingBar

A horizontal loading bar. Two modes: indeterminate (bouncing sweep animation — for "something is happening") and determinate (shows exact percentage — for trackable progress).

Live Preview

LoadingBar · indeterminate
Waiting for server...
████████░░░░░░░░░░░░░░░░░███████

~/my-cli — node v22● running

Installation

npx inkui add loading-bar

Usage

import { LoadingBar } from './components/ui/loading-bar';
 
// Indeterminate — just animates
<LoadingBar />
 
// Determinate — shows progress
<LoadingBar value={progress} />

Examples

Indeterminate

<LoadingBar />

Determinate with controlled value

const [progress, setProgress] = useState(0);
 
useEffect(() => {
  const t = setInterval(() => setProgress(p => Math.min(p + 5, 100)), 100);
  return () => clearInterval(t);
}, []);
 
<LoadingBar value={progress} />

Fixed width

<LoadingBar value={65} width={40} />

Custom color

<LoadingBar value={80} color="#A855F7" />

Props

Prop	Type	Default	Description
`value`	`number`	`undefined`	0–100. Omit for indeterminate mode
`width`	`number`	terminal width	Bar width in columns
`color`	`string`	theme primary	Bar fill color
`theme`	`InkUITheme`	`darkTheme`	Color theme

On this page