Circle spin loading

by Spencer Smith

HTML

<div class="wrap">
  <span></span>
  <span></span>
</div>

CSS

* { box-sizing: border-box; }
.wrap {
  display: flex;
  width: 62px;
  height: 62px;
  /* background-color: lightgreen; */
  align-items: center;
  justify-content: center;
  animation: rotate 1s infinite linear;
}
span {
  height: 5px;
  width: 5px;
  background-color: #333;
  border-radius: 50%;
  margin: 1px;
  animation: pulse 2s infinite;
}
span:nth-child(2) {
  animation-delay: 1s;
}
@keyframes pulse {
  0% {
    height: 5px;
    width: 5px;
  }
  50% {
    height: 30px;
    width: 30px;
  }
  100% {
    height: 5px;
    width: 5px;
  }
}
@keyframes rotate {
  from { transform: rotate(0deg) }
  to   { transform: rotate(360deg) }
}