Pulsar
Optical throughput meter tallying passing units012

Meter

CSS

An optical sensor tallies throughput as payload units pass beneath, rolling the volumetric counter digits on each beam break.

Tier
CSS
Dependencies
None
Duration
3.6 s, loops
Categories
Loaders and spinners
Use cases
Determinate progress, Dashboards and reporting
Industries
Manufacturing and industrial, Energy and utilities
Style
Geometric solid · light stroke
Set
conveyor
Tags
loopminimalgeometricuicounter

Companion assets

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

Animated
Optical throughput meter tallying passing units012
CSS tier
Static vector
Meter, not animated
Download SVG

Code

animation.svg

<svg xmlns="http://www.w3.org/2000/svg" aria-labelledby="conveyor-meter-title" class="pulsar pulsar-conveyor-meter" data-pulsar="conveyor-meter" role="img" viewBox="0 0 120 40"><title id="conveyor-meter-title">Optical throughput meter tallying passing units</title><line id="conveyor-meter-track" x1="0" x2="120" y1="28" y2="28" stroke="currentColor" stroke-opacity=".15" stroke-width="2"></line><line id="conveyor-meter-post" x1="50" x2="50" y1="4" y2="12" stroke="currentColor" stroke-opacity=".4" stroke-width="2"></line><circle id="conveyor-meter-emitter" cx="50" cy="12" r="2" fill="var(--pulsar-accent, currentColor)"></circle><line id="conveyor-meter-beam" x1="50" x2="50" y1="14" y2="28" stroke="var(--pulsar-accent, currentColor)" stroke-width="1" opacity=".4"></line><g id="conveyor-meter-box"><rect width="36" height="13" x="74" y="4" fill="none" stroke="currentColor" stroke-opacity=".3" stroke-width="1.25" rx="1.5"></rect><line x1="92" x2="92" y1="4" y2="17" stroke="currentColor" stroke-opacity=".2"></line><text x="83" y="14" fill="currentColor" font-family="monospace" font-size="8" opacity=".5" text-anchor="middle">0</text><g id="conveyor-meter-roller"><text id="conveyor-meter-d1" x="101" y="14" fill="var(--pulsar-accent, currentColor)" font-family="monospace" font-size="8" text-anchor="middle">1</text><text id="conveyor-meter-d2" x="101" y="24" fill="var(--pulsar-accent, currentColor)" font-family="monospace" font-size="8" text-anchor="middle">2</text></g></g><g id="conveyor-meter-units" fill="var(--pulsar-accent, currentColor)"><rect id="conveyor-meter-unit-1" width="10" height="12" x="-14" y="16" rx="1.5"></rect><rect id="conveyor-meter-unit-2" width="10" height="12" x="-14" y="16" rx="1.5"></rect></g></svg>

animation.css

.pulsar-conveyor-meter #conveyor-meter-unit-1 {
  animation: conveyor-meter-u1 3600ms linear infinite;
}

.pulsar-conveyor-meter #conveyor-meter-unit-2 {
  animation: conveyor-meter-u1 3600ms linear infinite;
  animation-delay: -1800ms;
}

.pulsar-conveyor-meter #conveyor-meter-beam {
  animation: conveyor-meter-pulse 3600ms ease-in-out infinite;
}

.pulsar-conveyor-meter #conveyor-meter-roller {
  animation: conveyor-meter-roll 3600ms cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

@keyframes conveyor-meter-u1 {
  0% {
    transform: translateX(0);
    opacity: 1;
  }
  48% {
    transform: translateX(134px);
    opacity: 1;
  }
  50% {
    transform: translateX(148px);
    opacity: 0;
  }
  50.01%,
  98% {
    transform: translateX(0);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes conveyor-meter-pulse {
  0%,
  18% {
    opacity: 0.3;
  }
  22%,
  25% {
    opacity: 1;
  }
  29%,
  68% {
    opacity: 0.3;
  }
  72%,
  75% {
    opacity: 1;
  }
  79%,
  100% {
    opacity: 0.3;
  }
}

@keyframes conveyor-meter-roll {
  0%,
  22% {
    transform: translateY(0);
  }
  27%,
  72% {
    transform: translateY(-10px);
  }
  77%,
  100% {
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .pulsar-conveyor-meter * {
    animation: none !important;
    transform: none;
  }
  .pulsar-conveyor-meter #conveyor-meter-unit-1 {
    transform: translateX(80px);
    opacity: 1;
  }
  .pulsar-conveyor-meter #conveyor-meter-unit-2 {
    transform: translateX(25px);
    opacity: 1;
  }
  .pulsar-conveyor-meter #conveyor-meter-beam {
    opacity: 0.3;
  }
}

From this family14 in Conveyor

See the family