Pulsar

Weight Check

CSS

A scale platform dips slightly as cargo mass blocks load onto it, while a vertical digital indicator column rises to display registered gross weight.

Tier
CSS
Dependencies
None
Duration
4 s, loops
Categories
Data and progress
Use cases
Determinate progress, Dashboards and reporting
Industries
Logistics and supply chain, Manufacturing and industrial
Style
Data mark · light stroke
Set
manifest
Tags
barsscaleminimal

Companion assets

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

Animated
CSS tier
Static vector
Weight Check, 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-manifest-weight" data-pulsar="manifest-weight" viewBox="0 0 160 96"><line x1="28" x2="116" y1="72" y2="72" stroke-width="1.5" opacity=".35"></line><rect width="12" height="48" x="124" y="24" stroke-width="1.5" opacity=".35" rx="2"></rect><rect width="8" height="12" x="126" y="58" fill="var(--pulsar-accent, currentColor)" class="meter-bar m1" rx="1"></rect><rect width="8" height="12" x="126" y="44" fill="var(--pulsar-accent, currentColor)" class="meter-bar m2" rx="1"></rect><rect width="8" height="12" x="126" y="30" fill="var(--pulsar-accent, currentColor)" class="meter-bar m3" rx="1"></rect><g class="scale-bed"><line x1="36" x2="108" y1="68" y2="68" stroke-width="2"></line><rect width="48" height="14" x="48" y="52" fill="var(--pulsar-accent, currentColor)" fill-opacity=".15" stroke="var(--pulsar-accent, currentColor)" stroke-width="1.5" class="cargo c1" rx="2"></rect></g></svg>

animation.css

.pulsar-manifest-weight {
  display: block;
  overflow: visible;
}
.pulsar-manifest-weight .scale-bed {
  animation: manifest-weight-bed 4000ms ease-in-out infinite;
}
.pulsar-manifest-weight .cargo.c1 {
  animation: manifest-weight-cargo 4000ms ease-in-out infinite;
}
.pulsar-manifest-weight .meter-bar.m1 {
  animation: manifest-weight-m1 4000ms ease-in-out infinite;
}
.pulsar-manifest-weight .meter-bar.m2 {
  animation: manifest-weight-m2 4000ms ease-in-out infinite;
}
.pulsar-manifest-weight .meter-bar.m3 {
  animation: manifest-weight-m3 4000ms ease-in-out infinite;
}

@keyframes manifest-weight-bed {
  0%,
  15% {
    transform: translateY(0);
  }
  35%,
  75% {
    transform: translateY(3px);
  }
  90%,
  100% {
    transform: translateY(0);
  }
}

@keyframes manifest-weight-cargo {
  0% {
    transform: translateY(-16px);
    opacity: 0;
  }
  25% {
    transform: translateY(0);
    opacity: 1;
  }
  75% {
    opacity: 1;
  }
  90%,
  100% {
    opacity: 0;
  }
}

@keyframes manifest-weight-m1 {
  0%,
  20% {
    opacity: 0.2;
  }
  30%,
  80% {
    opacity: 1;
  }
  95%,
  100% {
    opacity: 0.2;
  }
}

@keyframes manifest-weight-m2 {
  0%,
  30% {
    opacity: 0.2;
  }
  45%,
  80% {
    opacity: 1;
  }
  95%,
  100% {
    opacity: 0.2;
  }
}

@keyframes manifest-weight-m3 {
  0%,
  45% {
    opacity: 0.2;
  }
  60%,
  80% {
    opacity: 1;
  }
  95%,
  100% {
    opacity: 0.2;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pulsar-manifest-weight .scale-bed,
  .pulsar-manifest-weight .cargo.c1,
  .pulsar-manifest-weight .meter-bar.m1,
  .pulsar-manifest-weight .meter-bar.m2,
  .pulsar-manifest-weight .meter-bar.m3 {
    animation: none;
    transform: none;
    opacity: 1;
    stroke-dashoffset: 0;
  }
}

From this family15 in Manifest

See the family