Animations.
Back to the library

Waypoint hop loader, glided legs

Variant: Symmetric glide

The same waypoint loader with each leg accelerating out of one stop and decelerating into the next, which reads as a considered traverse rather than a snap. Use it in calmer surfaces — a settings panel or a background job list — where the ease-out version's urgency would be at odds with the tone. The symmetric curve is deliberately only applied to travel; the dot fill still lands ease-out so arrivals stay crisp against the softer motion.

loaderprogresswaypointease-in-outindeterminate

The source

A complete HTML document. Paste it into an empty .html file and it plays — no stylesheet, script, font, or image to fetch.

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Waypoint hop loader — symmetric glide</title>
<style>
:root {
  /* Neutrals — fixed, never remixed. */
  --ivory: #faf9f5;
  --paper: #ffffff;
  --oat: #e3dacc;
  --slate: #141413;

  /* Knobs — the remix API. A knob exists iff declared here and used below. */
  --hue: 38.8;
  --lift: 0;
  --chroma: 1;
  --round: 1;
  --speed: 1;

  /* Accents — derived from the knobs with the family's offsets baked in,
     so one hue roll moves them together. Defaults reproduce the original hex
     (#d97757 / #b85c3e / #788c5d / #b04a3f). */
  --clay: oklch(calc(0.6724 + var(--lift)) calc(0.1308 * var(--chroma)) var(--hue));
  --clay-d: oklch(calc(0.5797 + var(--lift)) calc(0.127 * var(--chroma)) var(--hue));
  --olive: oklch(calc(0.6118 + var(--lift)) calc(0.0713 * var(--chroma)) calc(var(--hue) + 88.3));
  --rust: oklch(calc(0.5408 + var(--lift)) calc(0.1357 * var(--chroma)) calc(var(--hue) - 10.3));

  /* Clock — every duration in the document runs off --t. */
  --cycle: 4s; /* the authored master loop */
  --t: calc(var(--cycle) / var(--speed));

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);

  /* File-specific: the four legs of the route, as percentages of the track. */
  --_p0: 0%;
  --_p1: 33.333%;
  --_p2: 66.667%;
  --_p3: 100%;
  --_dot: clamp(9px, 2.8vw, 11px);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-items: center;
  background: var(--ivory);
  color: var(--slate);
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

.card {
  width: min(400px, 90vw);
  padding: clamp(18px, 5vw, 26px) clamp(18px, 5vw, 28px);
  background: var(--paper);
  border: 1px solid var(--oat);
  border-radius: calc(14px * var(--round));
  display: grid;
  gap: clamp(14px, 4vw, 20px);
}

.label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  font-size: clamp(12px, 3.2vw, 13px);
  letter-spacing: 0.01em;
}

.label .lead { font-weight: 600; }

.label .sub {
  color: var(--clay-d);
  font-variant-numeric: tabular-nums;
  font-size: clamp(11px, 3vw, 12px);
  animation: breathe var(--t) linear infinite;
}

@keyframes breathe {
  0%, 100% { opacity: 0.55; }
  50%      { opacity: 1; }
}

.route {
  position: relative;
  height: calc(var(--_dot) * 2.4);
  margin: 0 calc(var(--_dot) / 2);
}

.rail {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 2px;
  margin-top: -1px;
  background-image: linear-gradient(90deg, var(--oat) 0 55%, transparent 55% 100%);
  background-size: 9px 2px;
  border-radius: 999px;
}

.rail-done {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 2px;
  margin-top: -1px;
  background: var(--clay);
  border-radius: 999px;
  clip-path: inset(0 100% 0 0);
  animation: trail var(--t) var(--ease-in-out) infinite;
}

@keyframes trail {
  0%                { clip-path: inset(0 100% 0 0); }
  16%               { clip-path: inset(0 calc(100% - var(--_p1)) 0 0); }
  28%               { clip-path: inset(0 calc(100% - var(--_p1)) 0 0); }
  44%               { clip-path: inset(0 calc(100% - var(--_p2)) 0 0); }
  56%               { clip-path: inset(0 calc(100% - var(--_p2)) 0 0); }
  72%               { clip-path: inset(0 0 0 0); }
  88%               { clip-path: inset(0 0 0 0); }
  100%              { clip-path: inset(0 0 0 100%); }
}

.stops {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.stop {
  width: var(--_dot);
  height: var(--_dot);
  border-radius: 50%;
  background: var(--paper);
  border: 2px solid var(--oat);
  position: relative;
}

.stop::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  background: var(--clay);
  transform: scale(0.35);
  opacity: 0;
  animation: arrive var(--t) var(--ease-out) infinite;
  animation-delay: var(--_d);
}

.stop:nth-child(1) { --_d: calc(0s / var(--speed)); }
.stop:nth-child(2) { --_d: calc(0.64s / var(--speed)); }
.stop:nth-child(3) { --_d: calc(1.76s / var(--speed)); }
.stop:nth-child(4) { --_d: calc(2.88s / var(--speed)); }

@keyframes arrive {
  0%   { transform: scale(0.35); opacity: 0; }
  9%   { transform: scale(1);    opacity: 1; }
  86%  { transform: scale(1);    opacity: 1; }
  96%  { transform: scale(1);    opacity: 0; }
  100% { transform: scale(0.35); opacity: 0; }
}

.marker {
  position: absolute;
  top: 50%;
  left: 0;
  width: calc(var(--_dot) * 1.7);
  height: calc(var(--_dot) * 1.7);
  margin-left: calc(var(--_dot) * -0.85);
  margin-top: calc(var(--_dot) * -0.85);
  animation: hop var(--t) var(--ease-in-out) infinite;
}

.marker::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid var(--clay-d);
  background: var(--paper);
}

.marker::after {
  content: '';
  position: absolute;
  inset: 28%;
  border-radius: 50%;
  background: var(--rust);
}

@keyframes hop {
  0%   { transform: translateX(var(--_p0)); opacity: 0.15; }
  6%   { transform: translateX(var(--_p0)); opacity: 1; }
  16%  { transform: translateX(var(--_p1)); }
  28%  { transform: translateX(var(--_p1)); }
  44%  { transform: translateX(var(--_p2)); }
  56%  { transform: translateX(var(--_p2)); }
  72%  { transform: translateX(var(--_p3)); }
  88%  { transform: translateX(var(--_p3)); opacity: 1; }
  97%  { transform: translateX(var(--_p3)); opacity: 0; }
  100% { transform: translateX(var(--_p3)); opacity: 0; }
}

@media (max-width: 380px) {
  .card { padding: 16px; gap: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  .rail-done { animation: none; clip-path: inset(0 0 0 0); opacity: 0.35; }
  .marker { animation: none; transform: translateX(var(--_p3)); opacity: 1; }
  .stop::after {
    transform: scale(1);
    animation: arrive-quiet calc(var(--t) * 2) var(--ease-out) infinite;
  }
  .label .sub { animation: breathe calc(var(--t) * 2) linear infinite; }
  @keyframes arrive-quiet {
    0%, 100% { opacity: 0.3; }
    50%      { opacity: 1; }
  }
}
</style>
</head>
<body>
  <div class="card">
    <div class="label">
      <span class="lead">Syncing workspace</span>
      <span class="sub">gathering sources</span>
    </div>
    <div class="route">
      <div class="rail"></div>
      <div class="rail-done"></div>
      <div class="stops">
        <span class="stop"></span>
        <span class="stop"></span>
        <span class="stop"></span>
        <span class="stop"></span>
      </div>
      <div class="marker"></div>
    </div>
  </div>
</body>
</html>

The variant family

Same idea, one axis moved. Compare them side by side before you commit.

Waypoint hop loader

Ease-out arrivals

Waypoint hop loader, linear legs

Linear legs

Waypoint hop loader, overshooting legs

Spring overshoot