Custom Properties as an HTML→CSS Data Channel

Markup supplies a value with style="--progress: …". CSS animates to that variable — per-instance data without rewriting the stylesheet.

Skill bars

Brand systems80%
Interface craft95%
Motion design70%

Prefer reduced-motion: the fill jumps to var(--progress) with no animation.

Important HTML + CSS

<span class="skill__fill" style="--progress: 80%"></span>

.skill__fill {
  width: 0;
  animation: skill-fill 1.4s ease forwards;
}

@keyframes skill-fill {
  to { width: var(--progress); }
}