feat: DeploymentProgress step indicator component

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-04-08 20:29:57 +02:00
parent 7e0536b5b3
commit 977bfc1c6b
2 changed files with 120 additions and 0 deletions
--- a/ui/src/components/DeploymentProgress.module.css
+++ b/ui/src/components/DeploymentProgress.module.css
@@ -0,0 +1,74 @@
+.container {
+  display: flex;
+  align-items: center;
+  gap: 0;
+  padding: 8px 0;
+}
+
+.step {
+  display: flex;
+  align-items: center;
+  gap: 0;
+}
+
+.dot {
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  border: 2px solid var(--border-subtle);
+  background: transparent;
+  flex-shrink: 0;
+}
+
+.dotCompleted {
+  background: var(--success);
+  border-color: var(--success);
+}
+
+.dotActive {
+  background: var(--accent, #6c7aff);
+  border-color: var(--accent, #6c7aff);
+  animation: pulse 1.5s ease-in-out infinite;
+}
+
+.dotFailed {
+  background: var(--error);
+  border-color: var(--error);
+}
+
+.line {
+  width: 32px;
+  height: 2px;
+  background: var(--border-subtle);
+}
+
+.lineCompleted {
+  background: var(--success);
+}
+
+.label {
+  font-size: 10px;
+  color: var(--text-muted);
+  text-align: center;
+  margin-top: 4px;
+}
+
+.labelActive {
+  color: var(--accent, #6c7aff);
+  font-weight: 600;
+}
+
+.labelFailed {
+  color: var(--error);
+}
+
+.stepColumn {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+@keyframes pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.5; }
+}