Liquid Progress Bar: Pure CSS Loading Animation

Liquid Progress Bar

A glass tube fills with two layers of liquid whose leading edges ripple like a wave. Each edge is a strip masked into a sine shape from three gradients, with the mask sliding to make it move.

Also known as: water fill progress bar, liquid loading bar, tube fill progress.

Color Size 64px Dark background

HTML

<div class="ldr-liquid-progress-bar" role="progressbar" aria-label="Loading">
  <span class="ldr-liquid-progress-bar-back"></span>
  <span class="ldr-liquid-progress-bar-front"></span>
</div>

CSS

.ldr-liquid-progress-bar {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  --r: calc(var(--s) / 9);
  position: relative;
  width: calc(var(--s) * 6);
  height: calc(var(--s) * 0.56);
  border-radius: var(--s);
  overflow: hidden;
  isolation: isolate;
  background: color-mix(in srgb, var(--ldr-color, #3b82f6) 10%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ldr-color, #3b82f6) 26%, transparent);
}
.ldr-liquid-progress-bar > span {
  position: absolute;
  inset: 0;
  z-index: -1;
  animation: ldr-liquid-progress-bar-fill 4.4s infinite;
}
.ldr-liquid-progress-bar > span::after {
  --wave:
    radial-gradient(circle var(--r) at var(--r) var(--r), #000 96%, transparent) 0 0 / 100% calc(var(--r) * 4),
    radial-gradient(circle var(--r) at var(--r) calc(var(--r) * 3), transparent 96%, #000) 0 0 / 100% calc(var(--r) * 4),
    linear-gradient(90deg, #000 50%, transparent 0);
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 100%;
  width: calc(var(--r) * 2);
  background: inherit;
  -webkit-mask: var(--wave);
  -webkit-mask-composite: source-over, source-in;
  mask: var(--wave);
  mask-composite: add, intersect;
  animation: ldr-liquid-progress-bar-wave 0.8s linear infinite;
}
.ldr-liquid-progress-bar > .ldr-liquid-progress-bar-front {
  background: var(--c);
}
.ldr-liquid-progress-bar > .ldr-liquid-progress-bar-back {
  left: calc(var(--s) / 4);
  background: color-mix(in srgb, var(--ldr-color, #3b82f6) 38%, transparent);
}
.ldr-liquid-progress-bar > .ldr-liquid-progress-bar-back::after {
  animation-duration: 1.3s;
  animation-direction: reverse;
}
.ldr-liquid-progress-bar::after {
  content: "";
  position: absolute;
  top: 18%;
  left: calc(var(--s) / 4);
  right: calc(var(--s) / 4);
  height: calc(var(--s) / 14);
  border-radius: var(--s);
  background: rgb(255 255 255 / 0.4);
}
@keyframes ldr-liquid-progress-bar-fill {
  0%       { transform: translateX(calc(-100% - var(--r) * 2)); animation-timing-function: cubic-bezier(0.3, 0, 0.3, 1); }
  30%      { transform: translateX(calc(-64% - var(--r))); animation-timing-function: cubic-bezier(0.45, 0, 0.3, 1); }
  52%      { transform: translateX(-40%); animation-timing-function: cubic-bezier(0.45, 0, 0.3, 1); }
  76%, 92% { transform: translateX(0); opacity: 1; }
  100%     { transform: translateX(0); opacity: 0; }
}
@keyframes ldr-liquid-progress-bar-wave {
  to {
    -webkit-mask-position: 0 calc(var(--r) * 4), 0 calc(var(--r) * 4), 0 0;
    mask-position: 0 calc(var(--r) * 4), 0 calc(var(--r) * 4), 0 0;
  }
}

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

Liquid Progress Bar

HTML

CSS

Customizing this loader

Similar loaders