Pulsar
Expire

Expire

CSS

A ring depletes anticlockwise to nothing and the mark inside it goes flat.

Tier
CSS
Dependencies
None
Duration
4 s, loops
Categories
Icons and micro-interactions
Use cases
Errors and warnings, Compliance and audit
Industries
SaaS and software, Cross-industry
Style
Bold line · regular stroke
Set
verdict
Tags
loopminimalui

Companion assets

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

Animated
Expire
CSS tier
Static vector
Expire, not animated
Download SVG

Code

animation.svg

<svg xmlns="http://www.w3.org/2000/svg" aria-labelledby="verdict-expire-title" class="pulsar pulsar-verdict-expire" data-pulsar="verdict-expire" role="img" viewBox="0 0 40 40"><title id="verdict-expire-title">Expire</title><path id="verdict-expire-track" fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="3" d="M20 4a16 16 0 1 0 0 32 16 16 0 1 0 0-32" opacity=".2"></path><path id="verdict-expire-ring" fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="3" d="M20 4a16 16 0 1 0 0 32 16 16 0 1 0 0-32"></path><path id="verdict-expire-mark" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="m13 20 5 5 9-11"></path><path id="verdict-expire-flat" fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="3" d="M13 20h14"></path></svg>

animation.css

/* Accent: the mark inside, at both of its states, against the ring that runs out. */
.pulsar-verdict-expire #verdict-expire-mark,
.pulsar-verdict-expire #verdict-expire-flat {
  stroke: var(--pulsar-accent, currentColor);
}

/* The ring is drawn anticlockwise, so depleting it runs the same way. */
.pulsar-verdict-expire #verdict-expire-ring {
  stroke-dasharray: 101;
  animation: verdict-expire-deplete 4000ms linear infinite;
}

@keyframes verdict-expire-deplete {
  0%,
  10% {
    stroke-dashoffset: 0;
  }
  70%,
  88% {
    stroke-dashoffset: 101;
  }
  98%,
  100% {
    stroke-dashoffset: 0;
  }
}

.pulsar-verdict-expire #verdict-expire-mark {
  animation: verdict-expire-mark 4000ms ease-in-out infinite;
}

@keyframes verdict-expire-mark {
  0%,
  45% {
    opacity: 1;
  }
  62%,
  88% {
    opacity: 0;
  }
  98%,
  100% {
    opacity: 1;
  }
}

.pulsar-verdict-expire #verdict-expire-flat {
  stroke-dasharray: 14;
  stroke-dashoffset: 14;
  animation: verdict-expire-flat 4000ms cubic-bezier(0.22, 1, 0.36, 1) infinite;
}

@keyframes verdict-expire-flat {
  0%,
  50% {
    stroke-dashoffset: 14;
  }
  68%,
  88% {
    stroke-dashoffset: 0;
  }
  98%,
  100% {
    stroke-dashoffset: 14;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pulsar-verdict-expire #verdict-expire-ring {
    animation: none;
    stroke-dashoffset: 101;
  }
  .pulsar-verdict-expire #verdict-expire-mark {
    animation: none;
    opacity: 0;
  }
  .pulsar-verdict-expire #verdict-expire-flat {
    animation: none;
    stroke-dashoffset: 0;
  }
}

From this family15 in Verdict

See the family