CSS Loading Speedometer

This is some old codesandbox code I dug up to try out a new post format here.

Code isn’t all that interesting, but I wanted to try throwing something into my new Sandpack setup.

svg {
  --min-rotate: -55deg;
  --max-rotate: 60deg;
}

.pin {
  animation-name: pinRotate;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  transform-origin: 50% 254.5px;
  will-change: transform;
}

@keyframes pinRotate {
  0% {
    transform: rotate(var(--min-rotate));
  }
  20%,
  50% {
    transform: rotate(var(--max-rotate));
  }
  100% {
    transform: rotate(var(--min-rotate));
  }
}

.wrapper {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
.container {
  width: 10em;
  height: 10em;
}

Open Sandbox