Pulsar
Approve

Approve

CSS

A check draws itself into a ring that closes behind it and settles without a bounce.

Tier
CSS
Dependencies
None
Duration
4 s, loops
Categories
Icons and micro-interactions
Use cases
Success and confirmation
Industries
Finance and fintech, 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
Approve
CSS tier
Static vector
Approve, not animated
Download SVG

Code

animation.svg

<svg xmlns="http://www.w3.org/2000/svg" aria-labelledby="verdict-approve-title" class="pulsar pulsar-verdict-approve" data-pulsar="verdict-approve" role="img" viewBox="0 0 40 40"><title id="verdict-approve-title">Approve</title><path id="verdict-approve-ring" fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="3" d="M20 4a16 16 0 1 1 0 32 16 16 0 1 1 0-32"></path><path id="verdict-approve-check" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="m12 20 6 6 10-12"></path></svg>

animation.css

/* Accent: the check, against the ring that draws around it. */
.pulsar-verdict-approve #verdict-approve-check {
  stroke: var(--pulsar-accent, currentColor);
}

.pulsar-verdict-approve #verdict-approve-check {
  stroke-dasharray: 26;
  stroke-dashoffset: 26;
  animation: verdict-approve-check 4000ms linear infinite;
}

.pulsar-verdict-approve #verdict-approve-ring {
  stroke-dasharray: 101;
  stroke-dashoffset: 101;
  animation: verdict-approve-ring 4000ms linear infinite;
}

@keyframes verdict-approve-check {
  0% {
    stroke-dashoffset: 26;
    animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  }
  25%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes verdict-approve-ring {
  0%,
  25% {
    stroke-dashoffset: 101;
    animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  }
  65%,
  100% {
    stroke-dashoffset: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pulsar-verdict-approve #verdict-approve-check,
  .pulsar-verdict-approve #verdict-approve-ring {
    animation: none;
    stroke-dashoffset: 0;
  }
}

From this family15 in Verdict

See the family