<div class="container">
<div class="loader"></div>
  </div>

.container {
  font-size: 16px;
}
.loader {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);
  width: 3.125em;
  height: 3.125em;
  background-color: #eea622;
  border-radius: 50%;
}
.loader:after {
  content: '';
  position: absolute;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  border: 0px solid white;
  -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);
  -webkit-animation: loading 1000ms ease-out forwards infinite; animation: loading 1000ms ease-out forwards infinite;
}
@-webkit-keyframes loading {
  0% {border: 0px solid white;}
  20% {border: 8px solid white; width: 0%; height: 0%;}
  100% {border: 8px solid white; width: 100%; height: 100%;}
}
@keyframes loading {
   0% {border: 0px solid white;}
  20% {border: 8px solid white; width: 0%; height: 0%;}
  100% {border: 8px solid white; width: 100%; height: 100%;}
}