Pulsar

Scale

CSS

An architectural graphic scale bar with fine alternating subdivision blocks expands and contracts rhythmically.

Tier
CSS
Dependencies
None
Duration
4 s, loops
Categories
Icons and micro-interactions
Use cases
Determinate progress, Dashboards and reporting
Industries
Real estate and property, Construction and built environment
Style
Technical · light stroke
Set
floorplate
Tags
barsminimalloopscale

Companion assets

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

Animated
CSS tier
Static vector
Scale, not animated
Download SVG

Code

animation.svg

<svg xmlns="http://www.w3.org/2000/svg" fill="none" aria-hidden="true" class="pulsar pulsar-floorplate-scale" data-pulsar="floorplate-scale" viewBox="0 0 160 96"><g class="scale-bar"><rect width="24" height="8" x="32" y="44" fill="currentColor" stroke="currentColor" stroke-width="1.2" class="seg s1"></rect><rect width="24" height="8" x="56" y="44" stroke="currentColor" stroke-width="1.2" class="seg s2"></rect><rect width="24" height="8" x="80" y="44" fill="var(--pulsar-accent, currentColor)" stroke="var(--pulsar-accent, currentColor)" stroke-width="1.2" class="seg s3"></rect><rect width="24" height="8" x="104" y="44" stroke="var(--pulsar-accent, currentColor)" stroke-width="1.2" class="seg s4"></rect></g><path stroke="currentColor" stroke-linecap="round" d="M32 40v4m24-4v4m24-4v4m24-4v4m24-4v4" class="ticks"></path></svg>

animation.css

.pulsar-floorplate-scale {
  display: block;
  width: 100%;
  height: 100%;
}
.pulsar-floorplate-scale .scale-bar {
  animation: floorplate-scale-resize 4s ease-in-out infinite;
  transform-origin: 32px 48px;
}
.pulsar-floorplate-scale .ticks {
  animation: floorplate-scale-resize 4s ease-in-out infinite;
  transform-origin: 32px 48px;
}
@keyframes floorplate-scale-resize {
  0%,
  100% {
    transform: scaleX(0.85);
  }
  50% {
    transform: scaleX(1.08);
  }
}
@media (prefers-reduced-motion: reduce) {
  .pulsar-floorplate-scale .scale-bar,
  .pulsar-floorplate-scale .ticks {
    animation: none;
    transform: none;
  }
}

From this family15 in Floorplate

See the family