Percentage Progress Bar: Pure CSS Loading Animation

Percentage Progress Bar

A linear bar whose percentage rides above the fill in a small tooltip, counting from 0 to 100%. The number is pure CSS: a registered @property feeds both the counter and the fill.

Also known as: progress bar with percentage, counting progress bar, progress bar tooltip.

Color Size 64px Dark background

HTML

<div class="ldr-percentage-progress-bar" role="progressbar" aria-label="Loading">
  <span class="ldr-percentage-progress-bar-fill"></span>
  <span class="ldr-percentage-progress-bar-label"></span>
</div>

CSS

@property --ldr-percentage-progress-bar-p {
  syntax: "<integer>";
  initial-value: 0;
  inherits: true;
}
.ldr-percentage-progress-bar {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  --w: calc(var(--s) * 6);
  --h: calc(var(--s) / 8);
  position: relative;
  width: var(--w);
  height: calc(var(--s) * 0.9);
  animation: ldr-percentage-progress-bar-count 4s infinite;
}
.ldr-percentage-progress-bar::before,
.ldr-percentage-progress-bar-fill {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--h);
  border-radius: var(--s);
  background: color-mix(in srgb, var(--ldr-color, #3b82f6) 18%, transparent);
}
.ldr-percentage-progress-bar-fill {
  background: var(--c);
  clip-path: inset(0 calc(100% - var(--ldr-percentage-progress-bar-p) * 1%) 0 0 round var(--s));
}
.ldr-percentage-progress-bar-label {
  position: absolute;
  left: 0;
  bottom: calc(var(--h) + var(--s) / 5);
  width: calc(var(--s) * 0.95);
  padding: calc(var(--s) / 14) 0;
  border-radius: calc(var(--s) / 8);
  background: var(--c);
  color: #fff;
  font: 600 calc(var(--s) / 4) / 1 system-ui, sans-serif;
  font-variant-numeric: tabular-nums;
  text-align: center;
  transform: translateX(calc(var(--ldr-percentage-progress-bar-p) * var(--w) / 100 - 50%));
}
.ldr-percentage-progress-bar-label::before {
  counter-reset: ldr-percentage-progress-bar var(--ldr-percentage-progress-bar-p);
  content: counter(ldr-percentage-progress-bar) "%";
}
.ldr-percentage-progress-bar-label::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  border: calc(var(--s) / 14) solid transparent;
  border-top-color: var(--c);
  transform: translateX(-50%);
}
.ldr-percentage-progress-bar-fill,
.ldr-percentage-progress-bar-label {
  animation: ldr-percentage-progress-bar-fade 4s infinite;
}
@keyframes ldr-percentage-progress-bar-count {
  0%        { --ldr-percentage-progress-bar-p: 0; animation-timing-function: cubic-bezier(0.3, 0, 0.4, 1); }
  22%       { --ldr-percentage-progress-bar-p: 24; animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1); }
  38%       { --ldr-percentage-progress-bar-p: 41; animation-timing-function: cubic-bezier(0.4, 0, 0.3, 1); }
  60%       { --ldr-percentage-progress-bar-p: 83; animation-timing-function: cubic-bezier(0.5, 0, 0.4, 1); }
  76%, 100% { --ldr-percentage-progress-bar-p: 100; }
}
@keyframes ldr-percentage-progress-bar-fade {
  0%, 88%   { opacity: 1; }
  97%, 100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .ldr-percentage-progress-bar, .ldr-percentage-progress-bar *, .ldr-percentage-progress-bar::before, .ldr-percentage-progress-bar::after, .ldr-percentage-progress-bar *::before, .ldr-percentage-progress-bar *::after {
    animation-duration: 3s;
  }
}

Customizing this loader

Color: set --ldr-color on the element or a parent. Currently previewing #3b82f6.
Size: set --ldr-size. Every dimension in the snippet is derived from it. Currently previewing 64px.
Speed: change the duration on the animation shorthand. Delays on the children are relative, so they keep their rhythm.
Accessibility: the root carries role="status" and an aria-label so screen readers announce the wait. The reduced-motion rule at the end slows the animation for users who asked for less motion.

Percentage Progress Bar

HTML

CSS

Customizing this loader

Similar loaders