Sorting Bars Loader: Pure CSS Loading Animation

Sorting Bars Loader

Four bars of different heights swap places pair by pair until sorted, bounce once, then fade and start unsorted again. A nod to algorithm visualizers, good for dev tools, search and data jobs.

Also known as: sorting algorithm animation, bubble sort loader, swapping bars loader.

Color Size 64px Dark background

HTML

<div class="ldr-sorting-bars" role="status" aria-label="Sorting">
  <span style="--h: 75%"></span><span style="--h: 35%"></span><span style="--h: 95%"></span><span style="--h: 55%"></span>
</div>

CSS

.ldr-sorting-bars {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  --p: calc(var(--s) * 0.3);
  position: relative;
  width: calc(var(--s) * 1.1);
  height: var(--s);
  animation: ldr-sorting-bars-fade 3.6s infinite;
}
.ldr-sorting-bars span {
  position: absolute;
  bottom: 0;
  left: 0;
  width: calc(var(--s) * 0.2);
  height: var(--h);
  border-radius: calc(var(--s) / 24) calc(var(--s) / 24) 0 0;
  background: var(--c);
  transform-origin: 50% 100%;
  animation: 3.6s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
.ldr-sorting-bars span:nth-child(1) { animation-name: ldr-sorting-bars-a; }
.ldr-sorting-bars span:nth-child(2) { animation-name: ldr-sorting-bars-b; }
.ldr-sorting-bars span:nth-child(3) { animation-name: ldr-sorting-bars-c; }
.ldr-sorting-bars span:nth-child(4) { animation-name: ldr-sorting-bars-d; }
@keyframes ldr-sorting-bars-fade {
  0%        { opacity: 0; }
  4%, 86%   { opacity: 1; }
  94%, 100% { opacity: 0; }
}
@keyframes ldr-sorting-bars-a {
  0%   { transform: translateX(0) scaleY(1); opacity: 0.45; }
  6%   { opacity: 0.45; }
  9%   { opacity: 1; }
  10%  { transform: translateX(0) scaleY(1); }
  20%  { transform: translateX(var(--p)) scaleY(1); }
  21%  { opacity: 1; }
  24%  { opacity: 0.45; }
  42%  { opacity: 0.45; }
  45%  { opacity: 1; }
  46%  { transform: translateX(var(--p)) scaleY(1); }
  56%  { transform: translateX(calc(var(--p) * 2)) scaleY(1); }
  66%  { transform: translateX(calc(var(--p) * 2)) scaleY(1); }
  69%  { transform: translateX(calc(var(--p) * 2)) scaleY(1.1); }
  73%  { transform: translateX(calc(var(--p) * 2)) scaleY(1); }
  100% { transform: translateX(calc(var(--p) * 2)) scaleY(1); opacity: 1; }
}
@keyframes ldr-sorting-bars-b {
  0%   { transform: translateX(var(--p)) scaleY(1); opacity: 0.45; }
  6%   { opacity: 0.45; }
  9%   { opacity: 1; }
  10%  { transform: translateX(var(--p)) scaleY(1); }
  20%  { transform: translateX(0) scaleY(1); }
  21%  { opacity: 1; }
  24%  { opacity: 0.45; }
  57%  { opacity: 0.45; }
  60%  { transform: translateX(0) scaleY(1); opacity: 1; }
  63%  { transform: translateX(0) scaleY(1.1); }
  67%  { transform: translateX(0) scaleY(1); }
  100% { transform: translateX(0) scaleY(1); opacity: 1; }
}
@keyframes ldr-sorting-bars-c {
  0%   { transform: translateX(calc(var(--p) * 2)) scaleY(1); opacity: 0.45; }
  24%  { opacity: 0.45; }
  27%  { opacity: 1; }
  28%  { transform: translateX(calc(var(--p) * 2)) scaleY(1); }
  38%  { transform: translateX(calc(var(--p) * 3)) scaleY(1); }
  39%  { opacity: 1; }
  42%  { opacity: 0.45; }
  57%  { opacity: 0.45; }
  60%  { opacity: 1; }
  69%  { transform: translateX(calc(var(--p) * 3)) scaleY(1); }
  72%  { transform: translateX(calc(var(--p) * 3)) scaleY(1.1); }
  76%  { transform: translateX(calc(var(--p) * 3)) scaleY(1); }
  100% { transform: translateX(calc(var(--p) * 3)) scaleY(1); opacity: 1; }
}
@keyframes ldr-sorting-bars-d {
  0%   { transform: translateX(calc(var(--p) * 3)) scaleY(1); opacity: 0.45; }
  24%  { opacity: 0.45; }
  27%  { opacity: 1; }
  28%  { transform: translateX(calc(var(--p) * 3)) scaleY(1); }
  38%  { transform: translateX(calc(var(--p) * 2)) scaleY(1); }
  46%  { transform: translateX(calc(var(--p) * 2)) scaleY(1); }
  56%  { transform: translateX(var(--p)) scaleY(1); }
  63%  { transform: translateX(var(--p)) scaleY(1); }
  66%  { transform: translateX(var(--p)) scaleY(1.1); }
  70%  { transform: translateX(var(--p)) scaleY(1); }
  100% { transform: translateX(var(--p)) scaleY(1); opacity: 1; }
}

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

Sorting Bars Loader

HTML

CSS

Customizing this loader

Similar loaders