Lock

CSS

A shackle lowers into the body of a padlock and the mechanism seats with a quarter turn.

Tier: CSS
Dependencies: None
Duration: 4 s, loops
Categories: Icons and micro-interactions
Use cases: Security and trust
Industries: Finance and fintech, Security and identity
Style: Geometric solid · none stroke
Set: vault
Tags: loopgeometricui

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-lock-title" class="pulsar pulsar-vault-lock" data-pulsar="vault-lock" role="img" viewBox="0 0 48 48"><title id="vault-lock-title">Lock</title><path id="vault-lock-shackle" fill="currentColor" d="M12 28v-8c0-6.627 5.373-12 12-12s12 5.373 12 12v8h-6v-8a6 6 0 0 0-12 0v8z"></path><rect id="vault-lock-body" width="32" height="24" x="8" y="20" fill="currentColor" rx="2"></rect><rect id="vault-lock-cylinder" width="12" height="12" x="18" y="26" fill="currentColor" opacity=".3" rx="2"></rect></svg>

animation.css

/* Accent: the shackle that closes. */
.pulsar-vault-lock #vault-lock-shackle {
  fill: var(--pulsar-accent, currentColor);
}

.pulsar-vault-lock #vault-lock-shackle {
  animation: vault-lock-shackle 4000ms ease-in-out infinite;
}

@keyframes vault-lock-shackle {
  0% {
    transform: translateY(0);
  }
  20% {
    transform: translateY(8px);
  }
  75% {
    transform: translateY(8px);
  }
  85% {
    transform: translateY(8px);
  }
  100% {
    transform: translateY(0);
  }
}

.pulsar-vault-lock #vault-lock-cylinder {
  transform-origin: 24px 32px;
  transform-box: view-box;
  animation: vault-lock-cylinder 4000ms ease-in-out infinite;
}

@keyframes vault-lock-cylinder {
  0% {
    transform: rotate(0deg);
  }
  20% {
    transform: rotate(0deg);
  }
  40% {
    transform: rotate(90deg);
  }
  75% {
    transform: rotate(90deg);
  }
  85% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .pulsar-vault-lock #vault-lock-shackle {
    animation: none;
    transform: translateY(8px);
  }
  .pulsar-vault-lock #vault-lock-cylinder {
    animation: none;
    transform: rotate(90deg);
  }
}