Why it is timed this way

The reasoning

An entrance that hands off to a loop. The mark keeps breathing on a long, shallow cycle so the screen looks alive without implying progress it cannot measure — a bar that fills at a fixed rate is a lie when the wait is unknown.

3 elements move, the first at 0ms and the last starting at 70ms — the whole scene settles by 2800ms. Every bar below is one element's animation window.

Logo Inner

Fill

Loading Label

0ms1400ms2800ms

The code

Everything the scene needs, in whichever format you ship. Entrances compile to@keyframesand hover states totransition, with a reduced-motion guard on both.

119 lines

.loading {
  transform: translate3d(0px, 0px, 0);
  width: 960px;
  height: 480px;
  transform-origin: 480px 93px;
}

.logo-mark {
  transform: translate3d(0px, 0px, 0);
  width: 28px;
  height: 28px;
  background: #6366f1;
  border-radius: 22px;
  transform-origin: 40px 40px;
}

.track {
  transform: translate3d(0px, 0px, 0);
  width: 70px;
  height: 6px;
  background: #272c3a;
  border-radius: 999px;
  transform-origin: 35px 3px;
}

.logo-inner {
  transform: translate3d(0px, 0px, 0);
  width: 28px;
  height: 28px;
  background: #ffffff;
  border-radius: 9px;
  animation: logo-inner-anim 2800ms linear 0ms infinite both;
  will-change: transform, opacity;
}

@keyframes logo-inner-anim {
  0% {
    transform: translate3d(0px, 0px, 0);
    opacity: 0.85;
    animation-timing-function: ease-out;
  }
  21.43% {
    transform: translate3d(0px, 0px, 0) scale(1.022, 1.022);
    opacity: 0.915;
  }
  46.43% {
    transform: translate3d(0px, 0px, 0) scale(1.05, 1.05);
    opacity: 1;
    animation-timing-function: ease-in-out;
  }
  92.86% {
    transform: translate3d(0px, 0px, 0);
    opacity: 0.85;
  }
  100% {
    transform: translate3d(0px, 0px, 0);
    opacity: 0.85;
  }
}

.loading-label {
  transform: translate3d(0px, 0px, 0);
  width: 240px;
  height: 20px;
  background: #00000000;
  color: #98a1b5;
  font-size: 14px;
  font-weight: 500;
  animation: loading-label-anim 2800ms linear 0ms infinite both;
  will-change: transform, opacity;
}

@keyframes loading-label-anim {
  0% {
    opacity: 0;
  }
  2.5% {
    opacity: 0;
    animation-timing-function: ease-out;
  }
  23.93% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}

.fill {
  transform: translate3d(0px, 0px, 0);
  width: 70px;
  height: 6px;
  background: #22d3ee;
  border-radius: 999px;
  animation: fill-anim 2800ms linear 0ms infinite both;
  will-change: transform, opacity;
}

@keyframes fill-anim {
  0% {
    transform: translate3d(300px, 0px, 0);
    animation-timing-function: ease-out;
  }
  21.43% {
    transform: translate3d(0px, 0px, 0);
  }
  100% {
    transform: translate3d(0px, 0px, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .logo-inner,
  .loading-label,
  .fill {
    animation: none;
    transition: none;
  }
}