Pulsar
Retry

Retry

CSS

An arrow completes a three-quarter turn and snaps to its arrowhead, ready to run again.

Tier
CSS
Dependencies
None
Duration
4 s, loops
Categories
Icons and micro-interactions
Use cases
Loading and waiting, Errors and warnings
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
Retry
CSS tier
Static vector
Retry, not animated
Download SVG

Code

animation.svg

<svg xmlns="http://www.w3.org/2000/svg" aria-labelledby="verdict-retry-title" class="pulsar pulsar-verdict-retry" data-pulsar="verdict-retry" role="img" viewBox="0 0 40 40"><title id="verdict-retry-title">Retry</title><g id="verdict-retry-container"><path id="verdict-retry-arc" fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="3" d="M34 20A14 14 0 1 1 20 6"></path><path id="verdict-retry-head" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="m16 2 4 4-4 4"></path></g></svg>

animation.css

/* Accent: the arrow head that closes the loop. */
.pulsar-verdict-retry #verdict-retry-head {
  stroke: var(--pulsar-accent, currentColor);
}

.pulsar-verdict-retry #verdict-retry-container {
  transform-origin: 50% 50%;
  animation: verdict-retry-rotate 4000ms linear infinite;
}

.pulsar-verdict-retry #verdict-retry-head {
  stroke-dasharray: 12;
  stroke-dashoffset: 12;
  animation: verdict-retry-head 4000ms linear infinite;
}

@keyframes verdict-retry-rotate {
  0% {
    transform: rotate(-270deg);
  }
  70%,
  100% {
    transform: rotate(0deg);
  }
}

@keyframes verdict-retry-head {
  0%,
  70% {
    stroke-dashoffset: 12;
    animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  }
  85%,
  100% {
    stroke-dashoffset: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pulsar-verdict-retry #verdict-retry-container,
  .pulsar-verdict-retry #verdict-retry-head {
    animation: none;
    transform: none;
    stroke-dashoffset: 0;
  }
}