frontend/src/ui/Progress.css

/* ── Progress primitive ─────────────────────────────────────────── */

.ui-progress {
  width: 100%;
  background: rgba(0, 0, 0, 0.3);
  border-radius: var(--radius-sm);
  overflow: hidden;
  position: relative;
}

/* sizes */
.ui-progress--size-xs { height: 2px; }
.ui-progress--size-sm { height: 4px; }
.ui-progress--size-md { height: 6px; }

/* tones (fill colour) */
.ui-progress--brand   .ui-progress__fill { background: linear-gradient(90deg, var(--color-brand),  var(--color-accent)); }
.ui-progress--success .ui-progress__fill { background: linear-gradient(90deg, var(--color-success), var(--color-accent)); }
.ui-progress--warn    .ui-progress__fill { background: linear-gradient(90deg, var(--color-accent),  var(--color-warn));   }
.ui-progress--danger  .ui-progress__fill { background: linear-gradient(90deg, var(--color-danger),  var(--color-warn));   }

.ui-progress__fill {
  height: 100%;
  transition: width var(--dur-slow) var(--ease-out);
  position: relative;
}

.ui-progress__fill.has-shimmer::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.25), transparent);
  background-size: 200% 100%;
  animation: ui-shimmer 1.5s linear infinite;
}
@keyframes ui-shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position:  200% 0; }
}

/* indeterminate: sliding bar ~30% wide */
.ui-progress.is-indeterminate .ui-progress__fill {
  width: 30%;
  animation: ui-progress-indet 1.4s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
@keyframes ui-progress-indet {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(433%); } /* (100% - 30%) / 30% * 100 + 100 */
}