Pulsar
Gauge bars

Gauge Bars

CSS

Four rounded bars rise in quick succession from a baseline to different heights, hold as a small bar chart, then sink and rise again.

Tier
CSS
Dependencies
None
Duration
3 s, loops
Categories
Data and progress
Use cases
Determinate progress, Dashboards and reporting
Industries
SaaS and software, Finance and fintech
Style
Data mark · regular stroke
Set
gauge
Tags
barschartstaggerscaleloop
Themeable
Yes. Inherits currentColor and reads --pulsar-accent.
Version
1.0.0, added 2026-09-09
Licence
To be confirmed. See the repository LICENSE.

Code

animation.svg

<svg xmlns="http://www.w3.org/2000/svg" aria-labelledby="gauge-bars-title" class="pulsar pulsar-gauge-bars" data-pulsar="gauge-bars" role="img" viewBox="0 0 96 96"><title id="gauge-bars-title">Gauge bars</title><line id="gauge-bars-baseline" x1="10" x2="86" y1="80" y2="80" stroke="currentColor" stroke-linecap="round" stroke-width="6" opacity=".2"></line><rect id="gauge-bars-bar1" width="12" height="28" x="12" y="52" fill="currentColor" rx="3"></rect><rect id="gauge-bars-bar2" width="12" height="48" x="32" y="32" fill="currentColor" rx="3"></rect><rect id="gauge-bars-bar3" width="12" height="36" x="52" y="44" fill="currentColor" rx="3"></rect><rect id="gauge-bars-bar4" width="12" height="60" x="72" y="20" fill="currentColor" rx="3"></rect></svg>

animation.css

.pulsar-gauge-bars #gauge-bars-baseline {
  stroke: currentColor;
  opacity: 0.2;
}

.pulsar-gauge-bars #gauge-bars-bar1,
.pulsar-gauge-bars #gauge-bars-bar2,
.pulsar-gauge-bars #gauge-bars-bar3,
.pulsar-gauge-bars #gauge-bars-bar4 {
  fill: currentColor;
  transform-box: fill-box;
  transform-origin: center bottom;
  transform: scaleY(1);
  animation: gauge-bars-bar1 3000ms linear infinite;
}

.pulsar-gauge-bars #gauge-bars-bar2 {
  animation-name: gauge-bars-bar2;
}

.pulsar-gauge-bars #gauge-bars-bar3 {
  animation-name: gauge-bars-bar3;
}

.pulsar-gauge-bars #gauge-bars-bar4 {
  fill: var(--pulsar-accent, currentColor);
  animation-name: gauge-bars-bar4;
}

@keyframes gauge-bars-bar1 {
  0%,
  21% {
    transform: scaleY(1);
    animation-timing-function: cubic-bezier(0.4, 0, 1, 1);
  }
  33%,
  35% {
    transform: scaleY(0.04);
    animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  }
  70%,
  100% {
    transform: scaleY(1);
  }
}

@keyframes gauge-bars-bar2 {
  0%,
  19% {
    transform: scaleY(1);
    animation-timing-function: cubic-bezier(0.4, 0, 1, 1);
  }
  31%,
  40% {
    transform: scaleY(0.04);
    animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  }
  75%,
  100% {
    transform: scaleY(1);
  }
}

@keyframes gauge-bars-bar3 {
  0%,
  17% {
    transform: scaleY(1);
    animation-timing-function: cubic-bezier(0.4, 0, 1, 1);
  }
  29%,
  45% {
    transform: scaleY(0.04);
    animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  }
  80%,
  100% {
    transform: scaleY(1);
  }
}

@keyframes gauge-bars-bar4 {
  0%,
  15% {
    transform: scaleY(1);
    animation-timing-function: cubic-bezier(0.4, 0, 1, 1);
  }
  27%,
  50% {
    transform: scaleY(0.04);
    animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  }
  85%,
  100% {
    transform: scaleY(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .pulsar-gauge-bars #gauge-bars-bar1,
  .pulsar-gauge-bars #gauge-bars-bar2,
  .pulsar-gauge-bars #gauge-bars-bar3,
  .pulsar-gauge-bars #gauge-bars-bar4 {
    animation: none;
    transform: none;
  }
}