Pulsar

Smart Locker Sync

CSS

A modular locker grid coordinates status across delivery cells with an active compartment telemetry loop.

Tier
CSS
Dependencies
None
Duration
4 s, loops
Categories
Loaders and spinners
Use cases
Loading and waiting, Security and trust
Industries
Logistics and supply chain
Style
Minimal line · light stroke
Set
lastmile
Tags
gridminimallooppulse

Companion assets

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

Animated
CSS tier
Static vector
Smart Locker Sync, not animated
Download SVG

Code

animation.svg

<svg xmlns="http://www.w3.org/2000/svg" fill="none" aria-hidden="true" class="pulsar pulsar-lastmile-lockbox" data-pulsar="lastmile-lockbox" viewBox="0 0 160 96"><g stroke="currentColor" class="locker-grid" opacity=".25"><rect width="20" height="14" x="46" y="24" rx="1"></rect><rect width="20" height="14" x="70" y="24" rx="1"></rect><rect width="20" height="14" x="94" y="24" rx="1"></rect><rect width="20" height="14" x="46" y="42" rx="1"></rect><rect width="20" height="14" x="94" y="42" rx="1"></rect><rect width="20" height="14" x="46" y="60" rx="1"></rect><rect width="20" height="14" x="70" y="60" rx="1"></rect><rect width="20" height="14" x="94" y="60" rx="1"></rect></g><rect width="20" height="14" x="70" y="42" stroke="var(--pulsar-accent, currentColor)" stroke-width="1.5" class="active-cell" rx="1"></rect><circle cx="80" cy="49" r="2.5" fill="var(--pulsar-accent, currentColor)" class="lock-indicator"></circle><circle cx="80" cy="49" r="12" stroke="var(--pulsar-accent, currentColor)" stroke-dasharray="3 3" class="sync-loop"></circle></svg>

animation.css

.pulsar-lastmile-lockbox {
  display: block;
  width: 100%;
  height: 100%;
}
.pulsar-lastmile-lockbox .active-cell {
  animation: lastmile-lockbox-cell 4s ease-in-out infinite;
}
.pulsar-lastmile-lockbox .lock-indicator {
  animation: lastmile-lockbox-dot 4s ease-in-out infinite;
}
.pulsar-lastmile-lockbox .sync-loop {
  animation: lastmile-lockbox-sync 4s linear infinite;
  transform-origin: 80px 49px;
}
@keyframes lastmile-lockbox-cell {
  0%,
  100% {
    opacity: 0.5;
  }
  50% {
    opacity: 1;
  }
}
@keyframes lastmile-lockbox-dot {
  0%,
  100% {
    transform: scale(0.8);
    transform-origin: 80px 49px;
    opacity: 0.4;
  }
  50% {
    transform: scale(1.3);
    transform-origin: 80px 49px;
    opacity: 1;
  }
}
@keyframes lastmile-lockbox-sync {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .pulsar-lastmile-lockbox .active-cell,
  .pulsar-lastmile-lockbox .lock-indicator,
  .pulsar-lastmile-lockbox .sync-loop {
    animation: none;
    transform: none;
    opacity: 1;
  }
}

From this family15 in Lastmile

See the family