CSS 圆环 动态旋转加载效果

<div id="loading"></div>

css:
#loading{         
  font-size: 0.1rem;     
  position: relative; 
  margin: 0.06rem 0.52rem;     
  float: left;    
  text-indent: -9999em;     
  border-top: 0.05rem solid rgba(239,211,69);     
  border-right: 0.05rem solid rgba(239,211,69);     
  border-bottom: 0.05rem solid rgba(239,211,69);     
  border-left: 0.05rem solid #12314A;     
  -webkit-animation: loading 1.1s infinite linear;     
  animation: loading 1.1s infinite linear;     
}     
#loading,     
#loading:after {     
  border-radius: 50%;     
  width: 0.3rem;     
  height: 0.3rem;     
}     
@-webkit-keyframes loading{     
  0% {     
    -webkit-transform: rotate(0deg);     
    transform: rotate(0deg);     
  }     
  100% {     
    -webkit-transform: rotate(360deg);     
    transform: rotate(360deg);     
  }     
}     
@keyframes loading{     
  0% {     
    -webkit-transform: rotate(0deg);     
    transform: rotate(0deg);     
  }     
  100% {     
    -webkit-transform: rotate(360deg);     
    transform: rotate(360deg);     
  }     
}