Pulsar
Blocked

Blocked

CSS

A bar drops across a path and the approaching mark stops short of it.

Tier
CSS
Dependencies
None
Duration
4 s, loops
Categories
Icons and micro-interactions
Use cases
Errors and warnings, Security and trust
Industries
SaaS and software, Security and identity
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
Blocked
CSS tier
Static vector
Blocked, not animated
Download SVG

Code

animation.svg

<svg xmlns="http://www.w3.org/2000/svg" aria-labelledby="verdict-blocked-title" class="pulsar pulsar-verdict-blocked" data-pulsar="verdict-blocked" role="img" viewBox="0 0 40 40"><title id="verdict-blocked-title">Blocked</title><path id="verdict-blocked-path" fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="3" d="M5 20h30" opacity=".25"></path><path id="verdict-blocked-bar" fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="3" d="M27 8v24"></path><path id="verdict-blocked-mark" fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="3" d="M6 20h4"></path></svg>

animation.css

/* Accent: the mark that is trying to get through. */
.pulsar-verdict-blocked #verdict-blocked-mark {
  stroke: var(--pulsar-accent, currentColor);
}

/* The bar drops first, so the mark has something to stop short of. */
.pulsar-verdict-blocked #verdict-blocked-bar {
  stroke-dasharray: 24;
  stroke-dashoffset: 24;
  animation: verdict-blocked-drop 4000ms cubic-bezier(0.65, 0, 0.35, 1) infinite;
}

@keyframes verdict-blocked-drop {
  0% {
    stroke-dashoffset: 24;
  }
  20%,
  90% {
    stroke-dashoffset: 0;
  }
  100% {
    stroke-dashoffset: 24;
  }
}

/* Advances, meets the bar, recoils a little and gives up. */
.pulsar-verdict-blocked #verdict-blocked-mark {
  transform-box: view-box;
  animation: verdict-blocked-approach 4000ms infinite;
}

@keyframes verdict-blocked-approach {
  0%,
  22% {
    transform: translateX(0);
    animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1);
  }
  50% {
    transform: translateX(12px);
    animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
  }
  62%,
  90% {
    transform: translateX(9px);
  }
  100% {
    transform: translateX(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .pulsar-verdict-blocked #verdict-blocked-bar {
    animation: none;
    stroke-dashoffset: 0;
  }
  .pulsar-verdict-blocked #verdict-blocked-mark {
    animation: none;
    transform: translateX(9px);
  }
}

From this family15 in Verdict

See the family