Production Line
Manufacturing production line visualization with stations, animated connectors, flow indicators, progress tracking, and performance metrics.
Full Production Line
Preview
ERPlora Assembly Line Alpha Running
Daily Target
742
/ 1,000 units
Raw Material
Station 1
CNC Machining
Station 2
Assembly
Station 3
QC Check
Station 4
Packaging
Station 5
Station with Error and Tooltip
Preview
ERPlora Line Bravo Error
Cutting
OK
Welding
ERROR
Status
Overtemp
Down Since
14:32
Cycle Count
1,204
QC
Waiting
Shipping
Waiting
With Metrics Bar
Preview
ERPlora Line Charlie
Running
Output
1,842
units
+12%
Yield Rate
97.4
%
+0.8%
Cycle Time
42
sec
+3s
Scrap Rate
2.1
%
-0.4%
Forming
Finishing
Inspection
Calibrating
Compact Variant
Preview
ERPlora Mini Line D
Running
Input
Process
Output
Classes Reference
| Class | Description |
|---|---|
.production-line | Main container with border and padding |
.production-line-header | Header with title and status badge |
.production-line-title | Line name heading |
.production-line-status-badge | Status badge pill |
.production-line-status-badge-running | Running status (green with pulse dot) |
.production-line-status-badge-stopped | Stopped status (muted) |
.production-line-status-badge-maintenance | Maintenance status (yellow) |
.production-line-status-badge-error | Error status (red) |
.production-line-metrics | Metrics bar with KPIs |
.production-line-metric | Single metric with label, value, and trend |
.production-line-metric-trend-up | Positive trend (green) |
.production-line-metric-trend-down | Negative trend (red) |
.production-line-progress | Progress bar section (target vs actual) |
.production-line-progress-fill-success | Green progress fill |
.production-line-progress-fill-warning | Yellow progress fill |
.production-line-progress-fill-danger | Red progress fill |
.production-line-progress-target-marker | Target line marker on progress bar |
.production-line-stations | Scrollable stations container |
.production-line-station | Single station node |
.production-line-station-running | Running station (green border and icon) |
.production-line-station-stopped | Stopped station (muted) |
.production-line-station-maintenance | Maintenance station (yellow) |
.production-line-station-error | Error station (red with pulse shadow) |
.production-line-station-alert | Alert badge on station icon (red circle) |
.production-line-station-tooltip | Hover tooltip with station details |
.production-line-connector | Line connecting two stations |
.production-line-connector-active | Active connector with flow animation |
.production-line-connector-inactive | Inactive connector (no flow) |
.production-line-speed | Speed indicator with bar |
.production-line-downtime | Downtime alert strip (red) |
.production-line-compact | Compact variant (hides metrics and progress) |
.production-line-sm | Small station icons (48px) |
.production-line-lg | Large station icons (80px) |
.production-line-vertical | Vertical layout (stations stacked top-to-bottom) |
.production-line.glass | Glass morphism variant |