Gradient Progress

<!-- Gradient Progress Bar -->
<div class="nuda-gradient-progress" role="progressbar"
     aria-valuenow="70" aria-valuemin="0" aria-valuemax="100"
     aria-label="70% complete">
  <div class="nuda-gradient-progress__bar" style="width: 70%"></div>
</div>

/* Gradient Progress Bar
   Gradient color shifting along the progress fill.
   Customize: --gp-color-a, --gp-color-b, --gp-color-c, --gp-track */

.nuda-gradient-progress {
  --gp-color-a: #818cf8;
  --gp-color-b: #f472b6;
  --gp-color-c: #fbbf24;
  --gp-track: rgba(255, 255, 255, 0.1);
  width: 100%;
  height: 10px;
  background: var(--gp-track);
  border-radius: 5px;
  overflow: hidden;
}

.nuda-gradient-progress__bar {
  height: 100%;
  border-radius: 5px;
  background: linear-gradient(
    90deg,
    var(--gp-color-a),
    var(--gp-color-b),
    var(--gp-color-c),
    var(--gp-color-a)
  );
  background-size: 300% 100%;
  animation: nuda-gradient-shift 2s linear infinite;
  transition: width 0.3s ease;
}

@keyframes nuda-gradient-shift {
  0%   { background-position: 0% 50%; }
  100% { background-position: 300% 50%; }
}

@media (prefers-reduced-motion: reduce) {
  .nuda-gradient-progress__bar {
    animation: none;
    background-size: 100% 100%;
  }
}