Progress Button Loader: Pure CSS Loading Animation

Progress Button Loader

A button that fills with color from left to right as a download runs, with the label flipping to white exactly where the fill has passed. Two stacked labels and one clip-path.

Also known as: download button progress, button progress fill, loading button with progress.

Color Size 64px Dark background

HTML

<button class="ldr-progress-fill-button" type="button" aria-busy="true">
  <span class="ldr-progress-fill-button-label">Downloading</span>
  <span class="ldr-progress-fill-button-fill" aria-hidden="true">Downloading</span>
</button>

CSS

.ldr-progress-fill-button {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  position: relative;
  display: inline-grid;
  place-items: center;
  padding: calc(var(--s) / 4) calc(var(--s) / 1.8);
  border: 0;
  border-radius: calc(var(--s) / 6);
  background: color-mix(in srgb, var(--ldr-color, #3b82f6) 14%, transparent);
  color: var(--c);
  font: 600 calc(var(--s) / 2.8) / 1.2 system-ui, sans-serif;
  overflow: hidden;
  cursor: progress;
}
.ldr-progress-fill-button-label,
.ldr-progress-fill-button-fill {
  white-space: nowrap;
}
.ldr-progress-fill-button-fill {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: var(--c);
  color: #fff;
  clip-path: inset(0 100% 0 0);
  animation: ldr-progress-fill-button-fill 3.4s infinite;
}
@keyframes ldr-progress-fill-button-fill {
  0%       { clip-path: inset(0 100% 0 0); opacity: 1; animation-timing-function: cubic-bezier(0.3, 0.7, 0.4, 1); }
  24%      { clip-path: inset(0 60% 0 0); animation-timing-function: linear; }
  36%      { clip-path: inset(0 55% 0 0); animation-timing-function: cubic-bezier(0.4, 0, 0.3, 1); }
  66%      { clip-path: inset(0 14% 0 0); animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1); }
  80%, 92% { clip-path: inset(0 0 0 0); opacity: 1; }
  100%     { clip-path: inset(0 0 0 0); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .ldr-progress-fill-button, .ldr-progress-fill-button *, .ldr-progress-fill-button::before, .ldr-progress-fill-button::after, .ldr-progress-fill-button *::before, .ldr-progress-fill-button *::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.

Progress Button Loader

HTML

CSS

Customizing this loader

Similar loaders