Progress

Progress bars show how far a task or process has advanced. Use them for file uploads, form completion, loading states, or any measurable progress.

Props

Installation

pnpm add @akanaka-design/components @akanaka-design/tokens

import "@akanaka-design/tokens/css";
import "@akanaka-design/components/styles.css";

Usage

import { Progress } from "@akanaka-design/components";

export function Example() {
  return <Progress value={60} />;
}

With label

Display the percentage beside the bar:

<Progress value={75} showLabel />

Custom max

Use a different scale (e.g., steps completed out of total):

<Progress value={3} max={5} showLabel />

Animated

Update the value over time for loading states:

const [progress, setProgress] = useState(0);

useEffect(() => {
  const timer = setInterval(() => {
    setProgress((prev) => (prev >= 100 ? 0 : prev + 10));
  }, 500);
  return () => clearInterval(timer);
}, []);

<Progress value={progress} showLabel />

Multiple progress bars

Show several metrics together:

<div className="space-y-4">
  <div>
    <p className="text-body-sm text-neutral-700 mb-1">Storage</p>
    <Progress value={45} showLabel />
  </div>
  <div>
    <p className="text-body-sm text-neutral-700 mb-1">Bandwidth</p>
    <Progress value={82} showLabel />
  </div>
</div>

Guidelines

When to use

• File uploads or downloads
• Multi-step form completion
• Loading states with known duration
• Usage meters (storage, bandwidth)

When not to use

• Unknown duration — use a spinner instead
• Very fast operations — progress bar may not be visible long enough
• Binary states — use a badge or status indicator

Content

• Keep the bar visible long enough to be meaningful
• Consider showing additional context (e.g., "3 of 5 steps")
• Use showLabel when the exact percentage matters