Pulsar

Promote

CSS

A secondary node icon rises vertically in a hierarchy to replace a fading primary node, while connections snap into the new layout.

Tier
CSS
Dependencies
None
Duration
5.5 s, loops
Categories
Icons and micro-interactions
Use cases
Success and confirmation, Workflow and approvals
Industries
SaaS and software, IT services and infrastructure
Style
Technical · light stroke
Set
failover
Tags
arrowcirclegeometricloopprogress

Companion assets

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

Animated
CSS tier
Static vector
Promote, not animated
Download SVG

Code

animation.svg

<svg xmlns="http://www.w3.org/2000/svg" fill="none" aria-hidden="true" class="pulsar pulsar-failover-promote" data-pulsar="failover-promote" viewBox="0 0 160 96"><g stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"><circle cx="34" cy="62" r="7" fill="currentColor" fill-opacity=".08"></circle><circle cx="126" cy="62" r="7" fill="currentColor" fill-opacity=".08"></circle><path id="failover-promote-spoke-l" d="m40 58 32-30" opacity=".6"></path><path id="failover-promote-spoke-r" d="M120 58 88 28" opacity=".6"></path><line x1="41" x2="119" y1="62" y2="62" stroke-dasharray="2 3" opacity=".3"></line></g><g id="failover-promote-node-p" stroke="currentColor" stroke-linecap="round" stroke-width="1.5"><circle cx="80" cy="24" r="10" fill="currentColor" fill-opacity=".08"></circle><circle cx="80" cy="24" r="4" fill="currentColor"></circle></g><g id="failover-promote-node-s" stroke="var(--pulsar-accent, currentColor)" stroke-linecap="round" stroke-width="1.5"><circle cx="80" cy="68" r="10" fill="var(--pulsar-accent, currentColor)" fill-opacity=".12"></circle><circle cx="80" cy="68" r="4" fill="var(--pulsar-accent, currentColor)"></circle><circle id="failover-promote-halo" cx="80" cy="68" r="15" stroke-dasharray="2 3" opacity="0"></circle></g></svg>

animation.css

.pulsar-failover-promote #failover-promote-node-p {
  animation: failover-promote-p-anim 5500ms ease-in-out infinite;
}

@keyframes failover-promote-p-anim {
  0%,
  28% {
    opacity: 1;
    transform: scale(1);
  }
  38%,
  84% {
    opacity: 0.15;
    transform: scale(0.85);
  }
  92%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

.pulsar-failover-promote #failover-promote-node-s {
  animation: failover-promote-s-anim 5500ms cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

@keyframes failover-promote-s-anim {
  0%,
  32% {
    transform: translateY(0);
  }
  44%,
  82% {
    transform: translateY(-44px);
  }
  92%,
  100% {
    transform: translateY(0);
  }
}

.pulsar-failover-promote #failover-promote-halo {
  animation: failover-promote-halo-anim 5500ms ease-out infinite;
}

@keyframes failover-promote-halo-anim {
  0%,
  42% {
    opacity: 0;
    transform: scale(0.8);
  }
  48%,
  78% {
    opacity: 0.8;
    transform: scale(1.2);
  }
  86%,
  100% {
    opacity: 0;
    transform: scale(0.8);
  }
}

.pulsar-failover-promote #failover-promote-spoke-l,
.pulsar-failover-promote #failover-promote-spoke-r {
  animation: failover-promote-spokes-anim 5500ms ease-in-out infinite;
}

@keyframes failover-promote-spokes-anim {
  0%,
  30% {
    opacity: 0.6;
    stroke: currentColor;
  }
  42%,
  82% {
    opacity: 1;
    stroke: var(--pulsar-accent, currentColor);
  }
  92%,
  100% {
    opacity: 0.6;
    stroke: currentColor;
  }
}

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

From this family15 in Failover

See the family