Pulsar
Technical rate limiter gauge filling and blocking excess inbound requests

Rate Limiter

CSS

A circular gauge fills clockwise toward a threshold boundary, triggering a dashed rate-limit barrier as incoming request pulses stall outside.

Tier
CSS
Dependencies
None
Duration
3.6 s, loops
Categories
Icons and micro-interactions, Data and progress
Use cases
Errors and warnings, Security and trust
Industries
SaaS and software, Cross-industry
Style
Technical · light stroke
Set
endpoint
Tags
loopringpulseprogressui

Companion assets

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

Animated
Technical rate limiter gauge filling and blocking excess inbound requests
CSS tier
Static vector
Rate Limiter, not animated
Download SVG

Code

animation.svg

<svg xmlns="http://www.w3.org/2000/svg" aria-labelledby="endpoint-rate-limit-title" class="pulsar pulsar-endpoint-rate-limit" data-pulsar="endpoint-rate-limit" role="img" viewBox="0 0 160 96"><title id="endpoint-rate-limit-title">Technical rate limiter gauge filling and blocking excess inbound requests</title><g fill="none" stroke="currentColor" stroke-linecap="square" stroke-width=".75" opacity=".3"><path id="endpoint-rate-limit-datum" d="M20 20h8m-8 0v8m120-8h-8m8 0v8M20 76h8m-8 0v-8m120 8h-8m8 0v-8"></path><line id="endpoint-rate-limit-axis" x1="24" x2="136" y1="48" y2="48" stroke-dasharray="2 4"></line><circle cx="88" cy="48" r="22" stroke-dasharray="2 3"></circle></g><g fill="none" stroke="currentColor" stroke-linecap="square" stroke-width="1.25"><line id="endpoint-rate-limit-track" x1="28" x2="64" y1="48" y2="48" stroke-dasharray="2 3" opacity=".5"></line><line id="endpoint-rate-limit-barrier" x1="64" x2="64" y1="36" y2="60" stroke-dasharray="3 2"></line><circle id="endpoint-rate-limit-meter" cx="88" cy="48" r="22" stroke-dasharray="138.23" stroke-dashoffset="138.23" transform="rotate(-90 88 48)"></circle><circle id="endpoint-rate-limit-warning" cx="88" cy="48" r="6" stroke-dasharray="3 3"></circle></g><circle id="endpoint-rate-limit-core" cx="88" cy="48" r="2.5" fill="currentColor"></circle><rect id="endpoint-rate-limit-packet-1" width="6" height="6" x="28" y="45" fill="currentColor" rx="1"></rect><rect id="endpoint-rate-limit-packet-2" width="6" height="6" x="28" y="45" fill="currentColor" rx="1"></rect></svg>

animation.css

.pulsar-endpoint-rate-limit {
  --pulsar-accent: currentColor;
}

.pulsar-endpoint-rate-limit #endpoint-rate-limit-meter,
.pulsar-endpoint-rate-limit #endpoint-rate-limit-barrier,
.pulsar-endpoint-rate-limit #endpoint-rate-limit-warning {
  stroke: var(--pulsar-accent, currentColor);
}

.pulsar-endpoint-rate-limit #endpoint-rate-limit-core,
.pulsar-endpoint-rate-limit #endpoint-rate-limit-packet-1 {
  fill: var(--pulsar-accent, currentColor);
}

.pulsar-endpoint-rate-limit #endpoint-rate-limit-meter {
  animation: endpoint-rate-limit-meter-fill 3600ms cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.pulsar-endpoint-rate-limit #endpoint-rate-limit-packet-1 {
  animation: endpoint-rate-limit-p1 3600ms cubic-bezier(0.2, 0.8, 0.2, 1) infinite;
}

.pulsar-endpoint-rate-limit #endpoint-rate-limit-packet-2 {
  animation: endpoint-rate-limit-p2 3600ms cubic-bezier(0.2, 0.8, 0.2, 1) infinite;
}

.pulsar-endpoint-rate-limit #endpoint-rate-limit-barrier {
  animation: endpoint-rate-limit-gate 3600ms ease-in-out infinite;
}

.pulsar-endpoint-rate-limit #endpoint-rate-limit-warning {
  animation: endpoint-rate-limit-warn 3600ms cubic-bezier(0.16, 1, 0.3, 1) infinite;
  transform-origin: 88px 48px;
}

@keyframes endpoint-rate-limit-meter-fill {
  0% {
    stroke-dashoffset: 138.23;
  }
  48%,
  80% {
    stroke-dashoffset: 28;
  }
  92%,
  100% {
    stroke-dashoffset: 138.23;
  }
}

@keyframes endpoint-rate-limit-p1 {
  0% {
    transform: translateX(0);
    opacity: 0;
  }
  8% {
    opacity: 1;
  }
  32% {
    transform: translateX(57px);
    opacity: 1;
  }
  38%,
  100% {
    transform: translateX(57px);
    opacity: 0;
  }
}

@keyframes endpoint-rate-limit-p2 {
  0%,
  28% {
    transform: translateX(0);
    opacity: 0;
  }
  36% {
    opacity: 1;
  }
  48% {
    transform: translateX(25px);
  }
  52% {
    transform: translateX(23px);
  }
  56% {
    transform: translateX(25px);
  }
  75% {
    transform: translateX(25px);
    opacity: 1;
  }
  85%,
  100% {
    transform: translateX(25px);
    opacity: 0;
  }
}

@keyframes endpoint-rate-limit-gate {
  0%,
  42% {
    opacity: 0.2;
    stroke-width: 1.25;
  }
  48%,
  78% {
    opacity: 1;
    stroke-width: 2;
  }
  88%,
  100% {
    opacity: 0.2;
    stroke-width: 1.25;
  }
}

@keyframes endpoint-rate-limit-warn {
  0%,
  46% {
    opacity: 0;
    transform: scale(0);
  }
  54% {
    opacity: 0.9;
    transform: scale(1.3);
  }
  62%,
  78% {
    opacity: 0.7;
    transform: scale(1);
  }
  86%,
  100% {
    opacity: 0;
    transform: scale(0.6);
  }
}

@media (prefers-reduced-motion: reduce) {
  .pulsar-endpoint-rate-limit * {
    animation: none !important;
  }
  .pulsar-endpoint-rate-limit #endpoint-rate-limit-meter {
    stroke-dashoffset: 40;
  }
  .pulsar-endpoint-rate-limit #endpoint-rate-limit-barrier {
    opacity: 1;
  }
  .pulsar-endpoint-rate-limit #endpoint-rate-limit-packet-1 {
    transform: translateX(57px);
    opacity: 0.8;
  }
}

From this family15 in Endpoint

See the family