SOURCE

<div class="loading"></div>

body {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-justify-content: space-around;
      -ms-flex-pack: distribute;
          justify-content: space-around;
  -webkit-box-align: left;
  -webkit-align-items: left;
      -ms-flex-align: left;
          align-items: left;
  background: gray;
}
.loading {
  border-radius: 50%;
  width: 24px;
  height: 24px;
  border: 0.5rem solid rgba(255, 255, 255, 0.2);//
  border-left-color: red;
  -webkit-animation: spin 1s infinite linear;
          animation: spin 1s infinite linear;
}
@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);     
  }
  100% {
    -webkit-transform: rotate(360deg);       
  }
}