Pulsar

Sub-task progress

CSS

A horizontal sub-task progress bar fills steadily as an active lead separator rules through completion stages.

Tier
CSS
Dependencies
None
Duration
4 s, loops
Categories
Data and progress
Use cases
Determinate progress, Dashboards and reporting
Industries
Construction and built environment, Cross-industry
Style
Minimal line · light stroke
Set
punchlist
Tags
barsprogressloopminimal

Companion assets

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

Animated
CSS tier
Static vector
Sub-task progress, not animated
Download SVG

Code

animation.svg

<svg xmlns="http://www.w3.org/2000/svg" fill="none" aria-hidden="true" class="pulsar pulsar-punchlist-progress" data-pulsar="punchlist-progress" viewBox="0 0 160 96"><rect width="104" height="8" x="28" y="44" stroke="currentColor" stroke-width="1.2" class="track" opacity=".25" rx="2"></rect><line x1="28" x2="132" y1="48" y2="48" stroke="var(--pulsar-accent, currentColor)" stroke-linecap="round" stroke-width="6" class="fill-bar"></line><line x1="28" x2="28" y1="38" y2="58" stroke="currentColor" stroke-linecap="round" stroke-width="1.6" class="lead-cursor"></line></svg>

animation.css

.pulsar-punchlist-progress {
  display: block;
  width: 100%;
  height: 100%;
}
.pulsar-punchlist-progress .fill-bar {
  stroke-dasharray: 104;
  animation: punchlist-progress-fill 4s ease-in-out infinite;
}
.pulsar-punchlist-progress .lead-cursor {
  animation: punchlist-progress-lead 4s ease-in-out infinite;
}
@keyframes punchlist-progress-fill {
  0% {
    stroke-dashoffset: 104;
    opacity: 0.3;
  }
  60%,
  85% {
    stroke-dashoffset: 0;
    opacity: 1;
  }
  100% {
    stroke-dashoffset: 0;
    opacity: 0.3;
  }
}
@keyframes punchlist-progress-lead {
  0% {
    transform: translateX(0);
  }
  60%,
  85% {
    transform: translateX(104px);
  }
  100% {
    transform: translateX(104px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .pulsar-punchlist-progress .fill-bar,
  .pulsar-punchlist-progress .lead-cursor {
    animation: none;
    stroke-dashoffset: 0;
    transform: none;
    opacity: 1;
  }
}

From this family15 in Punchlist

See the family