Pulsar
Scan

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
Scan
CSS tier
Static vector
Scan, not animated
Download SVG

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><g id="conveyor-scan-units" fill="var(--pulsar-accent, currentColor)"><rect id="conveyor-scan-unit-1" width="12" height="12" x="-12" y="14" class="conveyor-scan-unit" rx="1.5"></rect><rect id="conveyor-scan-unit-2" width="12" height="12" x="28" y="14" class="conveyor-scan-unit" rx="1.5"></rect><rect id="conveyor-scan-unit-3" width="12" height="12" x="68" y="14" class="conveyor-scan-unit" rx="1.5"></rect><rect id="conveyor-scan-unit-4" width="12" height="12" x="108" y="14" class="conveyor-scan-unit" rx="1.5"></rect></g><g id="conveyor-scan-scanner"><path id="conveyor-scan-arch" fill="none" stroke="currentColor" stroke-linecap="round" stroke-opacity=".5" stroke-width="2" d="M52 28V8h16v20"></path><line id="conveyor-scan-crossbar" x1="48" x2="72" y1="8" y2="8" stroke="currentColor" stroke-linecap="round" stroke-width="2.5"></line><rect id="conveyor-scan-housing" width="12" height="7" x="54" y="4" fill="currentColor" rx="1.5"></rect><circle id="conveyor-scan-indicator" cx="60" cy="3" r="2" fill="var(--pulsar-accent, currentColor)"></circle><line id="conveyor-scan-lens" x1="56" x2="64" y1="11" y2="11" stroke="var(--pulsar-accent, currentColor)" stroke-linecap="round" stroke-width="1.5"></line><polygon id="conveyor-scan-cone" fill="var(--pulsar-accent, currentColor)" points="57,11 63,11 67,26 53,26" opacity="0"></polygon><line id="conveyor-scan-beam" x1="60" x2="60" y1="11" y2="26" stroke="var(--pulsar-accent, currentColor)" stroke-linecap="round" stroke-width="2"></line></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;
}

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

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

@keyframes conveyor-scan-indicator-anim {
  0%,
  56% {
    opacity: 0.3;
    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  }
  63%,
  68% {
    opacity: 1;
    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  }
  74%,
  100% {
    opacity: 0.3;
  }
}

@keyframes conveyor-scan-beam-anim {
  0%,
  56% {
    opacity: 0.2;
    stroke-width: 1.5;
    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  }
  63%,
  68% {
    opacity: 1;
    stroke-width: 2.5;
    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  }
  74%,
  100% {
    opacity: 0.2;
    stroke-width: 1.5;
  }
}

@keyframes conveyor-scan-cone-anim {
  0%,
  56% {
    opacity: 0;
    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  }
  63%,
  68% {
    opacity: 0.3;
    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  }
  74%,
  100% {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pulsar-conveyor-scan * {
    animation: none !important;
    transform: none;
  }
  .pulsar-conveyor-scan #conveyor-scan-indicator {
    opacity: 0.5;
  }
  .pulsar-conveyor-scan #conveyor-scan-beam {
    opacity: 0.35;
    stroke-width: 2;
  }
  .pulsar-conveyor-scan #conveyor-scan-cone {
    opacity: 0;
  }
}

From this family14 in Conveyor

See the family