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

Companion assets

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

Animated
Gauge bars
CSS tier
Static vector
Gauge Bars, not animated
Download SVG

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;
  }
}

From this family5 in Gauge

See the family