Pulsar

Opt-In

CSS

A toggle switch slides to the right, drawing in a crisp accent check mark stroke without solid background fills.

Tier
CSS
Dependencies
None
Duration
4 s, loops
Categories
Transitions and reveals
Use cases
Security and trust, Workflow and approvals
Industries
Security and identity, Cross-industry
Style
Minimal line · light stroke
Set
consent
Tags
uiminimallinestrokeprogress

Companion assets

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

Animated
CSS tier
Static vector
Opt-In, not animated
Download SVG

Code

animation.svg

<svg xmlns="http://www.w3.org/2000/svg" fill="none" aria-hidden="true" class="pulsar pulsar-consent-opt-in" data-pulsar="consent-opt-in" viewBox="0 0 160 96"><rect width="72" height="32" x="44" y="32" stroke="currentColor" stroke-width="1.25" opacity=".3" rx="16"></rect><g class="consent-opt-in-thumb"><circle cx="60" cy="48" r="11" stroke="var(--pulsar-accent, currentColor)" stroke-width="1.5"></circle></g><path stroke="var(--pulsar-accent, currentColor)" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m54 48 5 5 8-10" class="consent-opt-in-check"></path></svg>

animation.css

.pulsar-consent-opt-in {
  display: block;
  overflow: visible;
}
.pulsar-consent-opt-in .consent-opt-in-thumb {
  animation: consent-opt-in-thumb-anim 4000ms cubic-bezier(0.2, 1, 0.3, 1) infinite;
}
.pulsar-consent-opt-in .consent-opt-in-check {
  animation: consent-opt-in-check-anim 4000ms cubic-bezier(0.2, 1, 0.3, 1) infinite;
  stroke-dasharray: 20;
}

@keyframes consent-opt-in-thumb-anim {
  0%,
  20% {
    transform: translateX(0);
  }
  45%,
  80% {
    transform: translateX(40px);
  }
  92%,
  100% {
    transform: translateX(0);
  }
}

@keyframes consent-opt-in-check-anim {
  0%,
  25% {
    stroke-dashoffset: 20;
    opacity: 0;
  }
  50%,
  80% {
    stroke-dashoffset: 0;
    opacity: 1;
  }
  90%,
  100% {
    stroke-dashoffset: 20;
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pulsar-consent-opt-in .consent-opt-in-thumb,
  .pulsar-consent-opt-in .consent-opt-in-check {
    animation: none;
  }
}

From this family15 in Consent

See the family