Scan

CSS

Units pass beneath a reader that ticks each one as it clears the beam.

Tier: CSS
Dependencies: None
Duration: 3.2 s, loops
Categories: Loaders and spinners
Use cases: Loading and waiting, Determinate progress
Industries: Healthcare and life sciences, Logistics and supply chain
Style: Geometric solid · light stroke
Set: conveyor
Tags: loopminimalgeometricuistroke

Companion assets

The same artwork, not animated. Derived from the entry’s own resting state, so it matches exactly.

Animated

CSS tier

Code

animation.svg

<svg xmlns="http://www.w3.org/2000/svg" aria-labelledby="conveyor-scan-title" class="pulsar pulsar-conveyor-scan" data-pulsar="conveyor-scan" role="img" viewBox="0 0 120 40"><title id="conveyor-scan-title">Scan</title><line id="conveyor-scan-track" x1="0" x2="120" y1="26" y2="26" stroke="currentColor" stroke-opacity=".15" stroke-width="2"></line><line id="conveyor-scan-reader" x1="60" x2="60" y1="0" y2="12" stroke="currentColor" stroke-opacity=".5" stroke-width="2"></line><circle id="conveyor-scan-indicator" cx="60" cy="6" r="2" fill="currentColor"></circle><line id="conveyor-scan-beam" x1="60" x2="60" y1="12" y2="26" stroke="var(--pulsar-accent, currentColor)" stroke-width="1"></line><g id="conveyor-scan-units" fill="var(--pulsar-accent, currentColor)"><rect id="conveyor-scan-unit-1" width="12" height="12" x="-12" y="12" class="conveyor-scan-unit" rx="1.5"></rect><rect id="conveyor-scan-unit-2" width="12" height="12" x="28" y="12" class="conveyor-scan-unit" rx="1.5"></rect><rect id="conveyor-scan-unit-3" width="12" height="12" x="68" y="12" class="conveyor-scan-unit" rx="1.5"></rect><rect id="conveyor-scan-unit-4" width="12" height="12" x="108" y="12" class="conveyor-scan-unit" rx="1.5"></rect></g></svg>

animation.css

.pulsar-conveyor-scan .conveyor-scan-unit {
  animation: conveyor-scan-move-anim 3200ms linear infinite;
}

.pulsar-conveyor-scan #conveyor-scan-indicator {
  animation: conveyor-scan-indicator-anim 3200ms infinite;
}

.pulsar-conveyor-scan #conveyor-scan-beam {
  animation: conveyor-scan-beam-anim 3200ms infinite;
}

@keyframes conveyor-scan-move-anim {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(40px);
  }
}

@keyframes conveyor-scan-indicator-anim {
  0%,
  60% {
    opacity: 0.3;
    animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1);
  }
  65% {
    opacity: 1;
    animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1);
  }
  70%,
  100% {
    opacity: 0.3;
  }
}

@keyframes conveyor-scan-beam-anim {
  0%,
  60% {
    opacity: 0;
    animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1);
  }
  65% {
    opacity: 0.4;
    animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1);
  }
  70%,
  100% {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pulsar-conveyor-scan .conveyor-scan-unit {
    animation: none;
    transform: translateX(0);
  }
  .pulsar-conveyor-scan #conveyor-scan-indicator {
    animation: none;
    opacity: 0.3;
  }
  .pulsar-conveyor-scan #conveyor-scan-beam {
    animation: none;
    opacity: 0;
  }
}