Pulsar

Approval

CSS

A dual-key security shackle snaps open with an affirmative accent beacon, unlocking a release channel gate in a single definitive stroke.

Tier
CSS
Dependencies
None
Duration
5.5 s, loops
Categories
Icons and micro-interactions
Use cases
Success and confirmation, Compliance and audit
Industries
SaaS and software, Cross-industry
Style
Technical · light stroke
Set
rollout
Tags
circlegeometriclooppulseui

Companion assets

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

Animated
CSS tier
Static vector
Approval, not animated
Download SVG

Code

animation.svg

<svg xmlns="http://www.w3.org/2000/svg" fill="none" aria-hidden="true" class="pulsar pulsar-rollout-approval" data-pulsar="rollout-approval" viewBox="0 0 160 96"><line x1="20" x2="64" y1="48" y2="48" stroke="currentColor" stroke-linecap="round" stroke-width="1.5"></line><line x1="96" x2="140" y1="48" y2="48" stroke="currentColor" stroke-linecap="round" stroke-width="1.5"></line><g stroke="currentColor" stroke-linejoin="round" stroke-width="1.5"><rect width="28" height="24" x="66" y="44" fill="currentColor" fill-opacity=".06" rx="3"></rect><circle cx="80" cy="54" r="2.5" fill="currentColor"></circle><line x1="80" x2="80" y1="56" y2="61" stroke-linecap="round"></line></g><g id="rollout-approval-shackle" stroke="var(--pulsar-accent, currentColor)" stroke-linecap="round" stroke-width="2"><path d="M72 44V34c0-5 16-5 16 0v10"></path></g><circle id="rollout-approval-beacon" cx="80" cy="34" r="8" stroke="var(--pulsar-accent, currentColor)" stroke-dasharray="2 3" stroke-width="1.5" opacity="0"></circle></svg>

animation.css

.pulsar-rollout-approval #rollout-approval-shackle {
  transform-origin: 72px 44px;
  animation: rollout-approval-open 5500ms cubic-bezier(0.2, 0.8, 0.2, 1) infinite;
}

@keyframes rollout-approval-open {
  0%,
  25% {
    transform: translateY(0);
  }
  38%,
  80% {
    transform: translateY(-8px) rotate(-22deg);
  }
  90%,
  100% {
    transform: translateY(0);
  }
}

.pulsar-rollout-approval #rollout-approval-beacon {
  transform-origin: 80px 34px;
  animation: rollout-approval-ripple 5500ms ease-out infinite;
}

@keyframes rollout-approval-ripple {
  0%,
  34% {
    transform: scale(0.6);
    opacity: 0;
  }
  42%,
  78% {
    transform: scale(1.4);
    opacity: 0.85;
  }
  86%,
  100% {
    transform: scale(0.6);
    opacity: 0;
  }
}

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

From this family15 in Rollout

See the family