Progress

Stable

High-contrast progress bars featuring saturated neon fills, outer laser glow shadows, indeterminate infinite sweeps, and Radix UI accessibility.

Installation

$pnpm add @siberui/react

Import

tsx

import { Progress } from '@siberui/react';

Basic Usage & Value Binding

Pass a numerical value (0–100) to render a smoothly animated indicator fill.

BUFFER UPLOAD PROGRESS68%

tsx

<div className="space-y-3 w-full max-w-md">
  <div className="flex justify-between items-center text-xs font-mono">
    <span className="text-slate-400">BUFFER UPLOAD PROGRESS</span>
    <span className="text-cyan-400 font-bold">{val}%</span>
  </div>
  <Progress value={val} variant="neon" />
</div>

Neon Glow Presets (Cyan, Purple, Green, Rose)

Choose from laser illuminated semantic fill colors with outer glow projection.

NEURAL LINK (CYAN)92%

LATTICE ENCRYPTION (PURPLE)74%

INTEGRITY CHECK (GREEN)100%

REACTOR TEMPERATURE (ROSE)88%

tsx

<div className="space-y-6 w-full max-w-md">
  <div className="space-y-1.5">
    <div className="flex justify-between text-xs font-mono">
      <span className="text-cyan-400">NEURAL LINK (CYAN)</span>
      <span className="text-slate-400">92%</span>
    </div>
    <Progress value={92} variant="neon" />
  </div>

  <div className="space-y-1.5">
    <div className="flex justify-between text-xs font-mono">
      <span className="text-purple-400">LATTICE ENCRYPTION (PURPLE)</span>
      <span className="text-slate-400">74%</span>
    </div>
    <Progress value={74} variant="neonPurple" />
  </div>

  <div className="space-y-1.5">
    <div className="flex justify-between text-xs font-mono">
      <span className="text-emerald-400">INTEGRITY CHECK (GREEN)</span>
      <span className="text-slate-400">100%</span>
    </div>
    <Progress value={100} variant="neonGreen" />
  </div>

  <div className="space-y-1.5">
    <div className="flex justify-between text-xs font-mono">
      <span className="text-rose-400">REACTOR TEMPERATURE (ROSE)</span>
      <span className="text-rose-400 font-bold">88%</span>
    </div>
    <Progress value={88} variant="destructive" />
  </div>
</div>

Thickness & Scale (sm, md, lg)

Adjust track height between hairline sm (6px), standard md (10px), and prominent lg (16px).

SM (6PX HEIGHT)

MD (10PX HEIGHT)

LG (16PX HEIGHT)

tsx

<div className="space-y-6 w-full max-w-md">
  <div className="space-y-1.5">
    <span className="text-[11px] font-mono text-slate-500">SM (6PX HEIGHT)</span>
    <Progress value={65} size="sm" variant="neon" />
  </div>

  <div className="space-y-1.5">
    <span className="text-[11px] font-mono text-slate-500">MD (10PX HEIGHT)</span>
    <Progress value={65} size="md" variant="neon" />
  </div>

  <div className="space-y-1.5">
    <span className="text-[11px] font-mono text-slate-500">LG (16PX HEIGHT)</span>
    <Progress value={65} size="lg" variant="neon" />
  </div>
</div>

Indeterminate Scanning Mode

Pass isIndeterminate or omit value to trigger a continuous back-and-forth laser sweep animation.

SEARCHING SUBSPACE FREQUENCIES...

SCANNING

tsx

<div className="space-y-3 w-full max-w-md">
  <div className="flex justify-between items-center text-xs font-mono">
    <span className="text-cyan-400">SEARCHING SUBSPACE FREQUENCIES...</span>
    <Badge variant="neon" size="sm">SCANNING</Badge>
  </div>
  <Progress isIndeterminate variant="neon" size="md" />
</div>

Frosted Cyber-Glass Storage Buffer Card

Embed progress meters inside acrylic glass panels with circuit textures and active border sweeps.

NVME STORAGE BUFFER

842 GB / 1 TB

ENCRYPTED PARTITION84.2%

tsx

<div className="relative w-full max-w-md p-8 rounded-2xl bg-white/[0.04] backdrop-blur-xl border border-white/10 shadow-2xl overflow-hidden">
  <div className="relative z-10 space-y-6">
    <div className="flex items-center justify-between pb-3 border-b border-white/[0.08]">
      <div className="flex items-center gap-2">
        <HardDrive className="h-4 w-4 text-cyan-400" />
        <span className="font-mono text-xs font-bold text-white tracking-wider">NVME STORAGE BUFFER</span>
      </div>
      <Badge variant="glass" dot dotColor="cyan">842 GB / 1 TB</Badge>
    </div>

    <div className="space-y-2">
      <div className="flex justify-between text-xs font-mono text-slate-300">
        <span>ENCRYPTED PARTITION</span>
        <span className="text-cyan-400 font-bold">84.2%</span>
      </div>
      <Progress value={84.2} variant="neon" size="md" />
    </div>

    <div className="pt-2">
      <Button variant="neon" glow className="w-full">
        FLUSH WRITE JOURNAL
      </Button>
    </div>
  </div>
  <BorderBeam variant="neon" size={140} duration={6} borderWidth={1.5} glow />
</div>

Tactical HUD Hardware Telemetry Dashboard

Multi-gauge cluster monitor dashboard card.

NODE HARDWARE UTILIZATION

OPTIMAL

Realtime utilization across node compute subsystems.

CPU CORE LOAD42%

ECC RAM (64 GB)68%

NETWORK TX BANDWIDTH24%

tsx

<Card className="max-w-md mx-auto border-cyan-500/30 bg-[#070b14] shadow-xl">
  <CardHeader className="pb-4 border-b border-white/[0.06]">
    <div className="flex items-center justify-between">
      <CardTitle className="text-sm font-mono text-cyan-400 tracking-wider">NODE HARDWARE UTILIZATION</CardTitle>
      <Badge variant="neon" size="sm">OPTIMAL</Badge>
    </div>
    <CardDescription className="text-xs text-slate-400">
      Realtime utilization across node compute subsystems.
    </CardDescription>
  </CardHeader>

  <CardContent className="p-6 space-y-4">
    <div className="space-y-1.5">
      <div className="flex justify-between text-xs font-mono text-slate-300">
        <span>CPU CORE LOAD</span>
        <span className="text-cyan-400">42%</span>
      </div>
      <Progress value={42} variant="neon" size="sm" />
    </div>

    <div className="space-y-1.5">
      <div className="flex justify-between text-xs font-mono text-slate-300">
        <span>ECC RAM (64 GB)</span>
        <span className="text-purple-400">68%</span>
      </div>
      <Progress value={68} variant="neonPurple" size="sm" />
    </div>

    <div className="space-y-1.5">
      <div className="flex justify-between text-xs font-mono text-slate-300">
        <span>NETWORK TX BANDWIDTH</span>
        <span className="text-emerald-400">24%</span>
      </div>
      <Progress value={24} variant="neonGreen" size="sm" />
    </div>
  </CardContent>
</Card>

API Reference

PROPERTIES (5)← swipe to inspect →

Property	Description	Type	Default
value	Current progress completion percentage (0–100).	number	-
variant	Visual color fill and glowing laser shadow theme.	"default" \| "neon" \| "neonPurple" \| "neonGreen" \| "destructive"	"default"
size	Physical track height thickness.	"sm" \| "md" \| "lg"	"md"
isIndeterminate	Renders an endless back-and-forth scanning laser beam when duration/total cannot be calculated.	boolean	false
indicatorClassName	Custom Tailwind class overrides passed directly to the inner fill bar.	string	-

Accessibility

Radix UI Primitive: Built on Radix UI Progress primitive, adhering to W3C WAI-ARIA Progressbar specifications.
ARIA Attributes: Automatically populates aria-valuenow, aria-valuemin="0", and aria-valuemax="100".

Best Practices

Labels: Always accompany progress bars with textual numerical percentages (74%) and task labels.