Goal Burst

<div class="nuda-cc2-goal-burst" role="img" aria-label="Progress bar reaching its goal with a celebratory burst">
  <span class="nuda-cc2-goal-burst__caption" aria-hidden="true">Weekly Goal</span>
  <span class="nuda-cc2-goal-burst__track" aria-hidden="true">
    <span class="nuda-cc2-goal-burst__fill"></span>
    <span class="nuda-cc2-goal-burst__flag" aria-hidden="true">✓</span>
    <span class="nuda-cc2-goal-burst__spark" style="--tx:-8px;  --ty:-14px"></span>
    <span class="nuda-cc2-goal-burst__spark" style="--tx:6px;   --ty:-16px"></span>
    <span class="nuda-cc2-goal-burst__spark" style="--tx:14px;  --ty:-4px"></span>
    <span class="nuda-cc2-goal-burst__spark" style="--tx:12px;  --ty:10px"></span>
    <span class="nuda-cc2-goal-burst__spark" style="--tx:-2px;  --ty:14px"></span>
    <span class="nuda-cc2-goal-burst__spark" style="--tx:-10px; --ty:2px"></span>
  </span>
</div>

.nuda-cc2-goal-burst {
  position: relative;
  width: 200px;
  height: 90px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  padding: 0 18px;
  background: #09090b;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 12px;
  overflow: hidden;
}

.nuda-cc2-goal-burst__caption {
  font: 600 11px/1 system-ui,sans-serif;
  color: #cfcfcf;
  letter-spacing: .02em;
}

.nuda-cc2-goal-burst__track {
  position: relative;
  height: 8px;
  border-radius: 4px;
  background: rgba(255,255,255,.12);
  overflow: visible;
}

.nuda-cc2-goal-burst__fill {
  position: absolute;
  inset: 0;
  border-radius: 4px;
  background: #e4ff54;
  transform-origin: left center;
  transform: scaleX(0);
  will-change: transform,opacity;
  animation: _nuda-cc2goalfill 4.5s ease-in-out infinite;
}

.nuda-cc2-goal-burst__flag {
  position: absolute;
  right: -4px;
  top: 50%;
  font: 700 13px/1 system-ui,sans-serif;
  color: #e4ff54;
  opacity: 0;
  transform: translate(50%,-50%) scale(.3);
  will-change: transform,opacity;
  animation: _nuda-cc2goalflag 4.5s cubic-bezier(.34,1.56,.64,1) infinite;
}

.nuda-cc2-goal-burst__spark {
  position: absolute;
  right: 0;
  top: 50%;
  width: 4px;
  height: 4px;
  margin: -2px -2px 0 0;
  border-radius: 50%;
  background: #e4ff54;
  opacity: 0;
  will-change: transform,opacity;
  animation: _nuda-cc2goalspark 4.5s ease-out infinite;
}

@keyframes _nuda-cc2goalfill {
  0% {
    transform: scaleX(0);
    opacity: 1;
  }
  6% {
    transform: scaleX(0);
  }
  55% {
    transform: scaleX(1);
  }
  88% {
    transform: scaleX(1);
    opacity: 1;
  }
  94% {
    opacity: 0;
  }
  100% {
    transform: scaleX(0);
    opacity: 0;
  }
}

@keyframes _nuda-cc2goalflag {
  0%,50% {
    opacity: 0;
    transform: translate(50%,-50%) scale(.3);
  }
  58% {
    opacity: 1;
    transform: translate(50%,-50%) scale(1.3);
  }
  66% {
    transform: translate(50%,-50%) scale(1);
  }
  88% {
    opacity: 1;
  }
  96% {
    opacity: 0;
    transform: translate(50%,-50%) scale(.3);
  }
  100% {
    opacity: 0;
  }
}

@keyframes _nuda-cc2goalspark {
  0%,52% {
    opacity: 0;
    transform: translate(0,0) scale(.3);
  }
  60% {
    opacity: 1;
  }
  78% {
    opacity: 0;
    transform: translate(var(--tx),var(--ty)) scale(1);
  }
  100% {
    opacity: 0;
  }
}

@media (prefers-reduced-motion:reduce) {
  .nuda-cc2-goal-burst__fill {
    animation: none;
    transform: scaleX(1);
    opacity: 1;
  }
  .nuda-cc2-goal-burst__flag {
    animation: none;
    opacity: 1;
    transform: translate(50%,-50%) scale(1);
  }
  .nuda-cc2-goal-burst__spark {
    animation: none;
    opacity: 0;
  }
}