純CSS的讀取轉圈 loading spinner with pure css

可在這裡看跑起來的樣子
https://codepen.io/yujochia/pen/KKpRaOe

html:
<div class="loading"><div class='loading-indicator'><i></i></div>

CSS:
.loading-indicator {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -25px;
    margin-top: -25px;
    width: 50px;
    height: 50px;
   animation: spin 0.6s infinite;
  animation-timing-function:linear;
}
.loading-indicator:before {
    content: "";
    display: block;
    width: 50px;
    height: 25px;
    padding-bottom: 0;
    box-sizing: border-box;
    border-top-left-radius: 25px;
    border-top-right-radius: 25px;
    background: -webkit-linear-gradient(0deg, #999, #bbb);
}

.loading-indicator:after {
    content: "";
    display: block;
    width: 50px;
    height: 25px;
    padding-top: 0;
    box-sizing: border-box;
    border-bottom-left-radius: 25px;
    border-bottom-right-radius: 25px;
    background: -webkit-linear-gradient(0deg, #eee, #bbb);
}

.loading-indicator>i {
    display: block;
    position: absolute;
    width: 40px;
    height: 40px;
    background: white;  // middle color
    top: 5px;
    left: 5px;
    border-radius: 90%;

}
@keyframes spin{
  0% {transform:rotate(0deg);}
  100% {transform:rotate(360deg);}
}