Pulsar

Buffer

CSS

A horizontal box representing a parts buffer fills with small vertical bars from left to right, then slowly empties as parts are consumed.

Tier
CSS
Dependencies
None
Duration
4 s, loops
Categories
Data and progress
Use cases
Determinate progress, Workflow and approvals
Industries
Logistics and supply chain, Manufacturing and industrial
Style
Data mark · light stroke
Set
takt
Tags
barsgridminimallineprogress

Companion assets

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

Animated
CSS tier
Static vector
Buffer, 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-buffer" data-pulsar="takt-buffer" viewBox="0 0 160 96"><rect width="92" height="28" x="34" y="34" stroke="var(--pulsar-accent, currentColor)" stroke-width="1.8" rx="3"></rect><rect width="12" height="20" x="40" y="38" fill="currentColor" fill-opacity=".15" stroke="var(--pulsar-accent, currentColor)" stroke-width="1.5" class="takt-buf-cell c1" rx="1.5"></rect><rect width="12" height="20" x="58" y="38" fill="currentColor" fill-opacity=".15" stroke="var(--pulsar-accent, currentColor)" stroke-width="1.5" class="takt-buf-cell c2" rx="1.5"></rect><rect width="12" height="20" x="74" y="38" fill="currentColor" fill-opacity=".15" stroke="var(--pulsar-accent, currentColor)" stroke-width="1.5" class="takt-buf-cell c3" rx="1.5"></rect><rect width="12" height="20" x="90" y="38" fill="currentColor" fill-opacity=".15" stroke="var(--pulsar-accent, currentColor)" stroke-width="1.5" class="takt-buf-cell c4" rx="1.5"></rect><rect width="12" height="20" x="106" y="38" fill="currentColor" fill-opacity=".15" stroke="var(--pulsar-accent, currentColor)" stroke-width="1.5" class="takt-buf-cell c5" rx="1.5"></rect></svg>

animation.css

.pulsar-takt-buffer {
  display: block;
  overflow: visible;
}
.pulsar-takt-buffer .c1 {
  animation: takt-buffer-fill 4000ms ease-in-out infinite;
}
.pulsar-takt-buffer .c2 {
  animation: takt-buffer-fill 4000ms ease-in-out -800ms infinite;
}
.pulsar-takt-buffer .c3 {
  animation: takt-buffer-fill 4000ms ease-in-out -1600ms infinite;
}
.pulsar-takt-buffer .c4 {
  animation: takt-buffer-fill 4000ms ease-in-out -2400ms infinite;
}
.pulsar-takt-buffer .c5 {
  animation: takt-buffer-fill 4000ms ease-in-out -3200ms infinite;
}

@keyframes takt-buffer-fill {
  0%,
  20% {
    opacity: 0.15;
    transform: scaleY(0.4);
  }
  45%,
  75% {
    opacity: 1;
    transform: scaleY(1);
  }
  90%,
  100% {
    opacity: 0.15;
    transform: scaleY(0.4);
  }
}

@media (prefers-reduced-motion: reduce) {
  .pulsar-takt-buffer .c1,
  .pulsar-takt-buffer .c2,
  .pulsar-takt-buffer .c3,
  .pulsar-takt-buffer .c4,
  .pulsar-takt-buffer .c5 {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

From this family15 in Takt

See the family