OTP/2-factor code spinner

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.markdown

OTP/2-factor code spinner

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

License.

style.css

:root {
  --bg: gray;
  --fg: black;
  --size: 200px;
}
.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:        var(--size);
  width:         var(--size);
  z-index:       -1000;
  margin-top:    0px;
  margin-left:   0px;
  border-color:  var(--bg);
  border-style:  solid;
  border-width:  5px;
  border-radius: 50%;
}
.print-border {
  border: solid 1px red;
}
.spin-text div {
  display: block;
  width:   var(--size);
  height:  var(--size);
}
.spin-text span {
  font-weight:    bold;
  display:        inline-block;
  font-family:    monospace;
  font-size:      1.4em;
  text-align:     center;
  vertical-align: middle;
  height:         var(--size);
  width:          var(--size);
  line-height:    var(--size);
}
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:         var(--size);
  height:        var(--size);
  border-style:  solid;
  border-width:  5px;
  border-color:  transparent;
  border-radius: 50%;
}

.spin-cursor {
  border-top-color:    var(--fg)   !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:    var(--bg);
    border-right-color:  transparent;
    border-bottom-color: transparent;
    border-left-color:   transparent;
  }
  25%, 49% {
    border-top-color:    var(--bg);
    border-right-color:  var(--fg);
    border-bottom-color: transparent;
    border-left-color:   transparent;
  }
  50%, 74% {
    border-top-color:    var(--bg);
    border-right-color:  var(--fg);
    border-bottom-color: var(--fg);
    border-left-color:   transparent;
  }
  75% {
    border-top-color:    var(--bg);
    border-right-color:  var(--fg);
    border-bottom-color: var(--fg);
    border-left-color:   var(--fg);
  }
  76%, 100% {
    border-top-color:    var(--bg);
    border-right-color:  var(--fg);
    border-bottom-color: var(--fg);
    border-left-color:   var(--fg);
  }
}
.spin-slices {
  animation: slices-animation 30s infinite linear;
}