Pulsar

Smart Ping Meter

CSS

A smart meter icon emits wireless telemetry signal waves that ripple outward in a continuous cycle to represent remote data polling.

Tier
CSS
Dependencies
None
Duration
4 s, loops
Categories
Loaders and spinners
Use cases
Loading and waiting, Notifications
Industries
Energy and utilities, Telecommunications
Style
Data mark · light stroke
Set
meter
Tags
pulsewavegeometricring

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 Ping Meter, not animated
Download SVG

Code

animation.svg

<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="pulsar pulsar-meter-smart-ping" data-pulsar="meter-smart-ping" viewBox="0 0 160 96"><rect width="40" height="40" x="36" y="28" stroke-width="1.5" opacity=".4" rx="3"></rect><rect width="28" height="14" x="42" y="34" opacity=".3" rx="1.5"></rect><circle cx="56" cy="58" r="4" stroke-width="1.5"></circle><line x1="76" x2="88" y1="36" y2="36" stroke-width="1.5"></line><circle cx="88" cy="36" r="2.5" fill="var(--pulsar-accent, currentColor)"></circle><path stroke="var(--pulsar-accent, currentColor)" stroke-width="1.5" d="M96 28a12 12 0 0 1 0 16" class="meter-ping-arc meter-ping-a1"></path><path stroke="var(--pulsar-accent, currentColor)" stroke-width="1.5" d="M106 20a24 24 0 0 1 0 32" class="meter-ping-arc meter-ping-a2"></path><path stroke="var(--pulsar-accent, currentColor)" stroke-width="1.5" d="M116 12a36 36 0 0 1 0 48" class="meter-ping-arc meter-ping-a3"></path></svg>

animation.css

.pulsar-meter-smart-ping {
  display: block;
  overflow: visible;
}
.pulsar-meter-smart-ping .meter-ping-a1 {
  animation: meter-smart-ping-wave-anim 4000ms ease infinite;
  animation-delay: 0ms;
}
.pulsar-meter-smart-ping .meter-ping-a2 {
  animation: meter-smart-ping-wave-anim 4000ms ease infinite;
  animation-delay: -3200ms;
}
.pulsar-meter-smart-ping .meter-ping-a3 {
  animation: meter-smart-ping-wave-anim 4000ms ease infinite;
  animation-delay: -2600ms;
}

@keyframes meter-smart-ping-wave-anim {
  0% {
    opacity: 0;
    transform: scale(0.95);
  }
  30%,
  60% {
    opacity: 1;
    transform: scale(1);
  }
  90%,
  100% {
    opacity: 0;
    transform: scale(1.05);
  }
}

@media (prefers-reduced-motion: reduce) {
  .pulsar-meter-smart-ping .meter-ping-a1,
  .pulsar-meter-smart-ping .meter-ping-a2,
  .pulsar-meter-smart-ping .meter-ping-a3 {
    animation: none;
    opacity: 0.7;
    transform: none;
  }
}

From this family15 in Meter

See the family