Pulsar
Linear FIFO buffer queue accumulating data packets with an active queuing head indicating memory backpressurefifo-queue/buffer-05/6 QUEUED

Capacity FIFO Buffer

CSS

A linear FIFO memory buffer queues incoming data packets into discrete slot cells with an active pulsing head indicating system backpressure.

Tier
CSS
Dependencies
None
Duration
5.4 s, loops
Categories
Data and progress
Use cases
Determinate progress, Dashboards and reporting
Industries
SaaS and software, IT services and infrastructure
Style
Data mark · regular stroke
Set
capacity
Tags
loopbarsprogressui

Companion assets

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

Animated
Linear FIFO buffer queue accumulating data packets with an active queuing head indicating memory backpressurefifo-queue/buffer-05/6 QUEUED
CSS tier
Static vector
Capacity FIFO Buffer, not animated
Download SVG

Code

animation.svg

<svg xmlns="http://www.w3.org/2000/svg" aria-labelledby="capacity-buffer-title" class="pulsar pulsar-capacity-buffer" data-pulsar="capacity-buffer" role="img" viewBox="0 0 160 96"><title id="capacity-buffer-title">Linear FIFO buffer queue accumulating data packets with an active queuing head indicating memory backpressure</title><g fill="currentColor" font-family="monospace"><text x="24" y="22" font-size="3.5" opacity=".4">fifo-queue/buffer-0</text><text id="capacity-buffer-val" x="136" y="22" font-size="4.5" font-weight="700" opacity=".9" text-anchor="end">5/6 QUEUED</text></g><g fill="none" stroke="currentColor" stroke-width=".8" opacity=".3"><line x1="20" x2="140" y1="36" y2="36"></line><line x1="20" x2="140" y1="60" y2="60"></line><path d="m22 44 4 4-4 4"></path><path d="m134 44 4 4-4 4"></path></g><g fill="none" stroke="currentColor" stroke-dasharray="1 3" stroke-width=".5" opacity=".2"><rect width="12" height="16" x="34" y="40" rx="1"></rect><rect width="12" height="16" x="50" y="40" rx="1"></rect><rect width="12" height="16" x="66" y="40" rx="1"></rect><rect width="12" height="16" x="82" y="40" rx="1"></rect><rect width="12" height="16" x="98" y="40" rx="1"></rect><rect width="12" height="16" x="114" y="40" rx="1"></rect></g><rect id="capacity-buffer-p1" width="12" height="16" x="34" y="40" fill="currentColor" opacity=".3" rx="1.5"></rect><rect id="capacity-buffer-p2" width="12" height="16" x="50" y="40" fill="currentColor" opacity=".3" rx="1.5"></rect><rect id="capacity-buffer-p3" width="12" height="16" x="66" y="40" fill="currentColor" opacity=".4" rx="1.5"></rect><rect id="capacity-buffer-p4" width="12" height="16" x="82" y="40" fill="currentColor" opacity=".5" rx="1.5"></rect><g id="capacity-buffer-p5"><rect width="12" height="16" x="98" y="40" fill="currentColor" opacity=".6" rx="1.5"></rect><rect width="12" height="16" x="98" y="40" fill="none" stroke="currentColor" stroke-width="1.2" rx="1.5"></rect></g><line id="capacity-buffer-gate" x1="128" x2="128" y1="34" y2="62" fill="none" stroke="currentColor" stroke-width="1.4" opacity=".4"></line></svg>

animation.css

.pulsar-capacity-buffer {
  --pulsar-accent: currentColor;
}

.pulsar-capacity-buffer #capacity-buffer-p5 rect:last-child,
.pulsar-capacity-buffer #capacity-buffer-gate {
  stroke: var(--pulsar-accent, currentColor);
}

.pulsar-capacity-buffer #capacity-buffer-p5 rect:first-child,
.pulsar-capacity-buffer #capacity-buffer-val {
  fill: var(--pulsar-accent, currentColor);
}

.pulsar-capacity-buffer #capacity-buffer-p5 {
  animation: capacity-buffer-head 5400ms ease-in-out infinite;
}

@keyframes capacity-buffer-head {
  0%,
  100% {
    transform: scale(1);
    opacity: 0.7;
  }
  30%,
  70% {
    transform: scale(1.08);
    opacity: 1;
  }
}

.pulsar-capacity-buffer #capacity-buffer-p1,
.pulsar-capacity-buffer #capacity-buffer-p2,
.pulsar-capacity-buffer #capacity-buffer-p3,
.pulsar-capacity-buffer #capacity-buffer-p4 {
  animation: capacity-buffer-packets 5400ms ease-in-out infinite;
}

@keyframes capacity-buffer-packets {
  0%,
  100% {
    opacity: 0.3;
  }
  40%,
  75% {
    opacity: 0.65;
  }
}

.pulsar-capacity-buffer #capacity-buffer-gate {
  animation: capacity-buffer-gate-pulse 5400ms ease-in-out infinite;
}

@keyframes capacity-buffer-gate-pulse {
  0%,
  100% {
    opacity: 0.3;
  }
  45%,
  75% {
    opacity: 0.9;
  }
}

.pulsar-capacity-buffer #capacity-buffer-val {
  animation: capacity-buffer-txt 5400ms ease-in-out infinite;
}

@keyframes capacity-buffer-txt {
  0%,
  100% {
    opacity: 0.5;
  }
  40%,
  75% {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pulsar-capacity-buffer * {
    animation: none !important;
  }
  .pulsar-capacity-buffer #capacity-buffer-p5 {
    opacity: 1;
  }
  .pulsar-capacity-buffer #capacity-buffer-val {
    opacity: 1;
  }
}

From this family15 in Capacity

See the family