5.CSS动画效果

<div class="login-div-logo-round " ng-if="false">
<div class="login-div-logo-round-progress circle" ></div>
</div>
.login-div-logo-round{
  width: $loginLogoHeight;
  height: $loginLogoHeight;
  margin-left:-($loginLogoHeight + $loginLogoImgHeight )/2 ;
  //position: absolute;
  .login-div-logo-round-progress{
    width: $loginLogoHeight;
    height: $loginLogoHeight;
    border:$loginLogoBorder  solid $loginLogoBorderColor;
    border-radius: 50%;
    //position: absolute;
    -webkit-transform: rotate(45deg);
  }
  .circle{
    border:$loginLogoBorder  solid $loginLogoBorderColor;
    right:0;
    -webkit-animation: circleProgressLoad 2.5s linear  infinite;//infinite
  }

}
@-webkit-keyframes circleProgressLoad{
  0%{
    border-top:0.5rem  solid #D9D9D9;
    border-right:0.5rem  solid #FFFFFF;
    border-bottom:0.5rem  solid #FFFFFF;
    border-left:0.5rem  solid #FFFFFF;
  }
  33.3%{
    border-top:0.5rem  solid #D9D9D9;
    border-right:0.5rem  solid #D9D9D9;
    border-bottom:0.5rem  solid #FFFFFF;
    border-left:0.5rem  solid #FFFFFF;
  }
  66.6%{
    border-top:0.5rem  solid #D9D9D9;
    border-right:0.5rem  solid #D9D9D9;
    border-bottom:0.5rem  solid #D9D9D9;
    border-left:0.5rem  solid #FFFFFF;
  }
  100%{
    border:0.5rem  solid #D9D9D9;
  }

}