Pulsar

Sequence

CSS

A series of five connected circular nodes lights up in sequence from left to right, remaining illuminated to show accumulated progress.

Tier
CSS
Dependencies
None
Duration
4 s, loops
Categories
Data and progress
Use cases
Determinate progress, Workflow and approvals
Industries
Manufacturing and industrial, Cross-industry
Style
Data mark · light stroke
Set
takt
Tags
dotscirclelineminimalprogress

Companion assets

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

Animated
CSS tier
Static vector
Sequence, not animated
Download SVG

Code

animation.svg

<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="pulsar pulsar-takt-sequence" data-pulsar="takt-sequence" viewBox="0 0 160 96"><line x1="32" x2="128" y1="48" y2="48" stroke-width="2" opacity=".3"></line><g class="takt-seq-node n1"><circle cx="36" cy="48" r="6" fill="currentColor" fill-opacity=".1" stroke="var(--pulsar-accent, currentColor)" stroke-width="2"></circle><circle cx="36" cy="48" r="2.5" fill="var(--pulsar-accent, currentColor)" stroke-width="0"></circle></g><g class="takt-seq-node n2"><circle cx="58" cy="48" r="6" fill="currentColor" fill-opacity=".1" stroke="var(--pulsar-accent, currentColor)" stroke-width="2"></circle><circle cx="58" cy="48" r="2.5" fill="var(--pulsar-accent, currentColor)" stroke-width="0"></circle></g><g class="takt-seq-node n3"><circle cx="80" cy="48" r="6" fill="currentColor" fill-opacity=".1" stroke="var(--pulsar-accent, currentColor)" stroke-width="2"></circle><circle cx="80" cy="48" r="2.5" fill="var(--pulsar-accent, currentColor)" stroke-width="0"></circle></g><g class="takt-seq-node n4"><circle cx="102" cy="48" r="6" fill="currentColor" fill-opacity=".1" stroke="var(--pulsar-accent, currentColor)" stroke-width="2"></circle><circle cx="102" cy="48" r="2.5" fill="var(--pulsar-accent, currentColor)" stroke-width="0"></circle></g><g class="takt-seq-node n5"><circle cx="124" cy="48" r="6" fill="currentColor" fill-opacity=".1" stroke="var(--pulsar-accent, currentColor)" stroke-width="2"></circle><circle cx="124" cy="48" r="2.5" fill="var(--pulsar-accent, currentColor)" stroke-width="0"></circle></g></svg>

animation.css

.pulsar-takt-sequence {
  display: block;
  overflow: visible;
}
.pulsar-takt-sequence .n1 {
  transform-origin: 36px 48px;
  animation: takt-sequence-stage 4000ms ease-in-out infinite;
}
.pulsar-takt-sequence .n2 {
  transform-origin: 58px 48px;
  animation: takt-sequence-stage 4000ms ease-in-out -800ms infinite;
}
.pulsar-takt-sequence .n3 {
  transform-origin: 80px 48px;
  animation: takt-sequence-stage 4000ms ease-in-out -1600ms infinite;
}
.pulsar-takt-sequence .n4 {
  transform-origin: 102px 48px;
  animation: takt-sequence-stage 4000ms ease-in-out -2400ms infinite;
}
.pulsar-takt-sequence .n5 {
  transform-origin: 124px 48px;
  animation: takt-sequence-stage 4000ms ease-in-out -3200ms infinite;
}

@keyframes takt-sequence-stage {
  0%,
  15% {
    opacity: 0.25;
    transform: scale(0.8);
  }
  35%,
  85% {
    opacity: 1;
    transform: scale(1.15);
  }
  95%,
  100% {
    opacity: 0.25;
    transform: scale(0.8);
  }
}

@media (prefers-reduced-motion: reduce) {
  .pulsar-takt-sequence .n1,
  .pulsar-takt-sequence .n2,
  .pulsar-takt-sequence .n3,
  .pulsar-takt-sequence .n4,
  .pulsar-takt-sequence .n5 {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

From this family15 in Takt

See the family