Pulsar

Time-To-Live

CSS

A circular countdown progress indicator drains steadily, resetting to full only when a refreshing signal pulses.

Tier
CSS
Dependencies
None
Duration
4 s, loops
Categories
Data and progress
Use cases
Determinate progress, Security and trust
Industries
SaaS and software, Security and identity
Style
Technical · light stroke
Set
credential
Tags
countercirclepulsegeometricminimal

Companion assets

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

Animated
CSS tier
Static vector
Time-To-Live, not animated
Download SVG

Code

animation.svg

<svg xmlns="http://www.w3.org/2000/svg" fill="none" aria-hidden="true" class="pulsar pulsar-credential-ttl" data-pulsar="credential-ttl" viewBox="0 0 160 96"><circle cx="80" cy="48" r="28" stroke="currentColor" stroke-width="1.5" opacity=".35"></circle><line x1="80" x2="80" y1="20" y2="24" stroke="currentColor" stroke-width="2"></line><line x1="100" x2="97" y1="28" y2="31" stroke="currentColor" stroke-width="1.5"></line><line x1="108" x2="104" y1="48" y2="48" stroke="currentColor" stroke-width="2"></line><line x1="100" x2="97" y1="68" y2="65" stroke="currentColor" stroke-width="1.5"></line><line x1="80" x2="80" y1="76" y2="72" stroke="currentColor" stroke-width="2"></line><line x1="60" x2="63" y1="68" y2="65" stroke="currentColor" stroke-width="1.5"></line><line x1="52" x2="56" y1="48" y2="48" stroke="currentColor" stroke-width="2"></line><line x1="60" x2="63" y1="28" y2="31" stroke="currentColor" stroke-width="1.5"></line><line x1="80" x2="80" y1="48" y2="24" stroke="var(--pulsar-accent, currentColor)" stroke-linecap="round" stroke-width="2.5" class="credential-ttl-hand"></line><circle cx="80" cy="48" r="3.5" fill="var(--pulsar-accent, currentColor)"></circle><circle cx="80" cy="48" r="28" stroke="var(--pulsar-accent, currentColor)" stroke-width="1.5" class="credential-ttl-refresh"></circle></svg>

animation.css

.pulsar-credential-ttl {
  display: block;
  overflow: visible;
}
.pulsar-credential-ttl .credential-ttl-hand {
  transform-origin: 80px 48px;
  animation: credential-ttl-hand-anim 4000ms steps(8) infinite;
}
.pulsar-credential-ttl .credential-ttl-refresh {
  transform-origin: 80px 48px;
  animation: credential-ttl-refresh-anim 4000ms ease infinite;
}

@keyframes credential-ttl-hand-anim {
  0% {
    transform: rotate(0deg);
  }
  80% {
    transform: rotate(315deg);
  }
  90%,
  100% {
    transform: rotate(360deg);
  }
}

@keyframes credential-ttl-refresh-anim {
  0%,
  85% {
    transform: scale(0.8);
    opacity: 0;
  }
  92% {
    opacity: 0.9;
  }
  100% {
    transform: scale(1.4);
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pulsar-credential-ttl * {
    animation: none !important;
  }
}

From this family15 in Credential

See the family