Rating Distribution Bars

<div class="nuda-rating-dist">
  <div class="nuda-rating-dist__header">
    <div class="nuda-rating-dist__score">4.8</div>
    <div class="nuda-rating-dist__meta">
      <div class="nuda-rating-dist__sub">2,341 reviews</div>
    </div>
  </div>
  <ul class="nuda-rating-dist__bars">
    <li>
      <span class="nuda-rating-dist__label">5</span>
      <span class="nuda-rating-dist__track">
        <span class="nuda-rating-dist__fill" style="--w:82%"></span>
      </span>
      <span class="nuda-rating-dist__pct">82%</span>
    </li>
    <!-- 4, 3, 2, 1 rows ... -->
  </ul>
</div>

.nuda-rating-dist {
  max-width: 340px;
  padding: 1.25rem;
  background: #0c0c10;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
  color: #fafafa;
  font-family: ui-sans-serif,system-ui,sans-serif;
}

.nuda-rating-dist__header {
  display: flex;
  align-items: baseline;
  gap: .75rem;
  margin-bottom: 1rem;
}

.nuda-rating-dist__score {
  font-size: 2.25rem;
  font-weight: 700;
  line-height: 1;
  color: #fafafa;
  letter-spacing: -.02em;
}

.nuda-rating-dist__sub {
  font-size: .8125rem;
  color: #a0a0a8;
}

.nuda-rating-dist__bars {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .375rem;
}

.nuda-rating-dist__bars li {
  display: grid;
  grid-template-columns: 14px 1fr 36px;
  align-items: center;
  gap: .625rem;
  font-size: .75rem;
  color: #a0a0a8;
}

.nuda-rating-dist__label {
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.nuda-rating-dist__track {
  position: relative;
  height: 6px;
  border-radius: 3px;
  background: rgba(255,255,255,.06);
  overflow: hidden;
}

.nuda-rating-dist__fill {
  position: absolute;
  inset: 0;
  width: 0;
  background: linear-gradient(90deg,#e4ff54,#b8cc43);
  border-radius: 3px;
  animation: _rdfill 1.2s cubic-bezier(.16,1,.3,1) forwards;
}

@keyframes _rdfill {
  to {
    width: var(--w);
  }
}

.nuda-rating-dist__pct {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

@media (prefers-reduced-motion:reduce) {
  .nuda-rating-dist__fill {
    animation: none;
    width: var(--w);
  }
}