Scan

CSS

A scan line sweeps a fingerprint, its ridges resolving from faint to solid as it passes.

Tier: CSS
Dependencies: None
Duration: 4 s, loops
Categories: Loaders and spinners
Use cases: Loading and waiting, Security and trust
Industries: Healthcare and life sciences, Security and identity
Style: Geometric solid · none stroke
Set: vault
Tags: loopgeometricuiwipe

Companion assets

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

Animated

CSS tier

Code

animation.svg

<svg xmlns="http://www.w3.org/2000/svg" aria-labelledby="vault-scan-title" class="pulsar pulsar-vault-scan" data-pulsar="vault-scan" role="img" viewBox="0 0 48 48"><title id="vault-scan-title">Scan</title><defs><mask id="vault-scan-reveal"><rect width="48" height="48"></rect><rect id="vault-scan-mask-rect" width="32" height="40" x="8" y="4" fill="#fff"></rect></mask><g id="vault-scan-fingerprint-geometry"><path d="M8 44V24c0-8.84 7.16-16 16-16s16 7.16 16 16v20h-6V24c0-5.52-4.48-10-10-10s-10 4.48-10 10v20z"></path><path d="M16 44V24c0-4.42 3.58-8 8-8s8 3.58 8 8v20h-6V24c0-1.1-.9-2-2-2s-2 .9-2 2v20z"></path></g></defs><g id="vault-scan-faint"><use fill="currentColor" href="#vault-scan-fingerprint-geometry" opacity=".1"></use></g><g id="vault-scan-solid" mask="url(#vault-scan-reveal)"><use fill="currentColor" href="#vault-scan-fingerprint-geometry"></use></g><rect id="vault-scan-line" width="36" height="2" x="6" y="4" fill="currentColor" rx="1"></rect></svg>

animation.css

/* Accent: the scan line crossing the print. */
.pulsar-vault-scan #vault-scan-line {
  fill: var(--pulsar-accent, currentColor);
}

.pulsar-vault-scan #vault-scan-line {
  animation: vault-scan-line 4000ms linear infinite;
}

@keyframes vault-scan-line {
  0% {
    transform: translateY(0);
    opacity: 1;
  }
  70% {
    transform: translateY(40px);
    opacity: 1;
  }
  80% {
    transform: translateY(40px);
    opacity: 0;
  }
  100% {
    transform: translateY(40px);
    opacity: 0;
  }
}

.pulsar-vault-scan #vault-scan-mask-rect {
  height: 0;
  animation: vault-scan-mask 4000ms linear infinite;
}

@keyframes vault-scan-mask {
  0% {
    height: 0;
  }
  70% {
    height: 40px;
  }
  80% {
    height: 40px;
  }
  100% {
    height: 40px;
  }
}

.pulsar-vault-scan #vault-scan-faint,
.pulsar-vault-scan #vault-scan-solid {
  animation: vault-scan-fade 4000ms linear infinite;
}

@keyframes vault-scan-fade {
  0% {
    opacity: 1;
  }
  70% {
    opacity: 1;
  }
  80% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pulsar-vault-scan #vault-scan-line {
    animation: none;
    transform: translateY(40px);
  }
  .pulsar-vault-scan #vault-scan-mask-rect {
    animation: none;
    height: 40px;
  }
  .pulsar-vault-scan #vault-scan-faint,
  .pulsar-vault-scan #vault-scan-solid {
    animation: none;
    opacity: 1;
  }
}