Sync Progress Bar
Block-based LCD progress bar with dynamic color thresholds. Blocks fill left-to-right with color transitions based on value. Used for pilot synchronization rates and system metrics.
[SRC]tsx
1import { SyncProgressBar } from "@mdrbx/nerv-ui";
Basic Usage
DEFAULTinspection frame
live inspectionframe-01
SYNC RATE72.0%
000025050075100
Color Thresholds
The bar automatically changes color based on the value:
THRESHOLDSinspection frame
live inspectionframe-01
CYAN (0-50%)35.0%
000025050075100
GREEN (50-80%)65.0%
000025050075100
ORANGE (80-95%)88.0%
000025050075100
RED + BLINK (95%+)97.0%
000025050075100
Custom Block Count
BLOCKSinspection frame
live inspectionframe-01
10 BLOCKS60.0%
000025050075100
20 BLOCKS60.0%
000025050075100
30 BLOCKS60.0%
000025050075100
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| value* | number | — | Progress value (0-100) |
| label | string | — | Label text displayed above the bar |
| showPercentage | boolean | true | Show percentage readout |
| blocks | number | 20 | Number of LCD blocks in the bar |
| blockHeight | number | 16 | Block height in pixels |
| className | string | "" | Additional CSS classes |
[i]COLOR LOGIC
Color thresholds: 0–50% cyan, 50–80% green, 80–95% orange, 95%+ red with blinking animation.