OTP/2-factor code spinner (oldest version)

index.html

<div class="wrapper">
  <div>
    <div class="spin-text">
      <div><span>123456</span></div>
    </div>
    <div class="spin-wrapper"><div>
      <div class="spin-container spin-cursor-container">
        <div class="spin spin-cursor"></div>
      </div>
      <div class="spin-container spin-slices-container">
        <div class="spin spin-slices"></div>
      </div>
    </div></div>
  </div>
</div>

otp-2-factor-code-spinner-oldest-version.markdown

OTP/2-factor code spinner (oldest version)

A Pen by Marco Aurélio da Silva on CodePen.

License.

style.css

.wrapper {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  padding:        0 auto;
}
.spin-wrapper {
  position: absolute;
}
.spin-container {
  transform: rotate(-45deg);
  position:  absolute;
}
@keyframes spin-goes-up {
  0%, 74% {
    z-index: -200;
  }
  75%, 100% {
    z-index: 500;
  }
}
@keyframes spin-goes-down {
  0%, 74% {
    z-index: 200;
  }
  75%, 100% {
    z-index: -500;
  }
}
.spin-cursor-container {
  animation: spin-goes-up 30s infinite linear;
}
.spin-slices-container {
  animation: spin-goes-down 30s infinite linear;
}
.spin-text {
  display: block;
  position: absolute;
  height: 100px;
  width: 100px;
  z-index: -1000;
  margin-top: 5px;
  margin-left: 5px;
}
.print-border {
  border: solid 1px red;
}
.spin-text div {
  display: block;
  width: 100px;
  height: 100px;
}
.spin-text span {
  font-weight: bold;
  display: inline-block;
  font-family: monospace;
  font-size: 1.4em;
  text-align: center;
  vertical-align: middle;
  height: 100px;
  width: 100px;
  line-height: 100px;
}
span.code {
  transform: rotate(45deg);
}
@-webkit-keyframes rotation-animation {
  0%   { transform: rotate(0deg);   }
  25%  { transform: rotate(90deg);  }
  50%  { transform: rotate(180deg); }
  75%  { transform: rotate(270deg); }
  100% { transform: rotate(360deg); }
}
.spin {
  width:         100px;
  height:        100px;
  border-style:  solid;
  border-width:  5px;
  border-color:  transparent;
  border-radius: 50%;
}

.spin-cursor {
  border-top-color:    black       !important;
  border-right-color:  transparent !important;
  border-bottom-color: transparent !important;
  border-left-color:   transparent !important;
  animation: rotation-animation 30s infinite linear;
}

@keyframes slices-animation {
  0%, 24% {
    border-top-color: white;
    border-right-color: transparent;
    border-bottom-color: transparent;
    border-left-color: transparent;
  }
  25%, 49% {
    border-top-color: white;
    border-right-color: black;
    border-bottom-color: transparent;
    border-left-color: transparent;
  }
  50%, 74% {
    border-top-color: white;
    border-right-color: black;
    border-bottom-color: black;
    border-left-color: transparent;
  }
  75% {
    border-top-color: white;
    border-right-color: black;
    border-bottom-color: black;
    border-left-color: black;
  }
  76%, 100% {
    border-top-color: white;
    border-right-color: black;
    border-bottom-color: black;
    border-left-color: black;
  }
}
.spin-slices {
  animation: slices-animation 30s infinite linear;
}