Pulsar

Geofence Entry

CSS

A circular dashed geofence boundary pulses softly while an entry indicator crosses the perimeter into center lock.

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

Companion assets

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

Animated
CSS tier
Static vector
Geofence Entry, not animated
Download SVG

Code

animation.svg

<svg xmlns="http://www.w3.org/2000/svg" fill="none" aria-hidden="true" class="pulsar pulsar-lastmile-geofence" data-pulsar="lastmile-geofence" viewBox="0 0 160 96"><circle cx="80" cy="48" r="28" stroke="currentColor" stroke-dasharray="3 3" stroke-width="1.2" class="boundary"></circle><circle cx="80" cy="48" r="20" stroke="var(--pulsar-accent, currentColor)" class="inner-pulse" opacity=".3"></circle><circle cx="80" cy="48" r="3" stroke="var(--pulsar-accent, currentColor)" stroke-width="1.2" class="center-target"></circle><path stroke="var(--pulsar-accent, currentColor)" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.4" d="M80 82V56m-3 6 3-6 3 6" class="entry-arrow"></path></svg>

animation.css

.pulsar-lastmile-geofence {
  display: block;
  width: 100%;
  height: 100%;
}
.pulsar-lastmile-geofence .boundary {
  animation: lastmile-geofence-rotate 4s linear infinite;
  transform-origin: 80px 48px;
}
.pulsar-lastmile-geofence .inner-pulse {
  animation: lastmile-geofence-pulse 4s ease-in-out infinite;
}
.pulsar-lastmile-geofence .center-target {
  animation: lastmile-geofence-target 4s ease-in-out infinite;
}
.pulsar-lastmile-geofence .entry-arrow {
  animation: lastmile-geofence-entry 4s cubic-bezier(0.2, 0.8, 0.2, 1) infinite;
}
@keyframes lastmile-geofence-rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes lastmile-geofence-pulse {
  0%,
  100% {
    transform: scale(0.85);
    transform-origin: 80px 48px;
    opacity: 0.15;
  }
  50% {
    transform: scale(1.15);
    transform-origin: 80px 48px;
    opacity: 0.6;
  }
}
@keyframes lastmile-geofence-target {
  0%,
  100% {
    opacity: 0.3;
    transform: scale(0.9);
    transform-origin: 80px 48px;
  }
  50% {
    opacity: 1;
    transform: scale(1.3);
    transform-origin: 80px 48px;
  }
}
@keyframes lastmile-geofence-entry {
  0% {
    transform: translateY(6px);
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  50%,
  80% {
    transform: translateY(-8px);
    opacity: 1;
  }
  100% {
    transform: translateY(-8px);
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .pulsar-lastmile-geofence .boundary,
  .pulsar-lastmile-geofence .inner-pulse,
  .pulsar-lastmile-geofence .center-target,
  .pulsar-lastmile-geofence .entry-arrow {
    animation: none;
    transform: none;
    opacity: 1;
  }
}

From this family15 in Lastmile

See the family