AsciiProgressBar

Progress bars with ASCII block characters for showing completion status and loading progress.

Preview

Static Progress (75%)

[â–“â–“â–“â–“â–“â–“â–“â–“â–“â–“â–“â–“â–“â–“â–“â–‘â–‘â–‘â–‘â–‘] (75%)

Animated Progress (0%)

[â–‘â–‘â–‘â–‘â–‘â–‘â–‘â–‘â–‘â–‘â–‘â–‘â–‘â–‘â–‘â–‘â–‘â–‘â–‘â–‘] (0%)

Download Progress (0%)

Downloading... 0%
[â–‘â–‘â–‘â–‘â–‘â–‘â–‘â–‘â–‘â–‘â–‘â–‘â–‘â–‘â–‘â–‘â–‘â–‘â–‘â–‘] (0%)

Installation

npm install react-ascii-ui

Usage

import { AsciiProgressBar } from 'react-ascii-ui';

export default function App() {
  const [progress, setProgress] = useState(0);

  return (
    <AsciiProgressBar 
      value={progress} 
      color="success" 
      showPercentage={true}
    />
  );
}

Examples

Different Sizes

Small (width: 30%)
[â–“â–“â–“â–“â–“â–“â–“â–“â–“â–“â–“â–“â–“â–“â–‘â–‘â–‘â–‘â–‘â–‘] (70%)
Medium (width: 50%)
[â–“â–“â–“â–“â–“â–“â–“â–“â–“â–“â–“â–“â–“â–“â–‘â–‘â–‘â–‘â–‘â–‘] (70%)
Large (width: 80%)
[â–“â–“â–“â–“â–“â–“â–“â–“â–“â–“â–“â–“â–“â–“â–‘â–‘â–‘â–‘â–‘â–‘] (70%)

Color Variants

Default
[â–“â–“â–“â–“â–“â–“â–“â–“â–“â–“â–“â–“â–‘â–‘â–‘â–‘â–‘â–‘â–‘â–‘] (60%)
Success
[â–“â–“â–“â–“â–“â–“â–“â–“â–“â–“â–“â–“â–“â–“â–“â–“â–‘â–‘â–‘â–‘] (80%)
Warning
[â–“â–“â–“â–“â–“â–“â–“â–“â–“â–“â–“â–“â–“â–‘â–‘â–‘â–‘â–‘â–‘â–‘] (65%)
Error
[â–“â–“â–“â–“â–“â–‘â–‘â–‘â–‘â–‘â–‘â–‘â–‘â–‘â–‘â–‘â–‘â–‘â–‘â–‘] (25%)

System Status Dashboard

CPU Usage:
[â–“â–“â–“â–“â–“â–“â–“â–“â–“â–“â–“â–“â–“â–“â–“â–“â–“â–‘â–‘â–‘] (85%)
85%
Memory:
[â–“â–“â–“â–“â–“â–“â–“â–“â–“â–“â–“â–“â–“â–“â–“â–“â–“â–“â–‘â–‘] (92%)
92%
Disk Space:
[â–“â–“â–“â–“â–“â–“â–“â–“â–“â–‘â–‘â–‘â–‘â–‘â–‘â–‘â–‘â–‘â–‘â–‘] (45%)
45%
Network:
[â–“â–“â–“â–“â–“â–“â–‘â–‘â–‘â–‘â–‘â–‘â–‘â–‘â–‘â–‘â–‘â–‘â–‘â–‘] (30%)
30%

API Reference

PropTypeDefaultDescription
valuenumber0Progress value (0-100)
colorColorVariantdefaultProgress bar color theme
showPercentagebooleanfalseShow percentage text
classNamestring""Additional CSS classes

Color Variants

Available color options: "default" | "success" | "warning" | "error"

default
██████░░░░ 60%
success
████████░░ 80%
warning
██████░░░░ 65%
error
██░░░░░░░░ 25%