loading动画css实现

效果图 

代码实现

<html>
<head></head>
<style>
  .box{
    display: inline-block;
    margin-right: 12px;
    vertical-align: middle;
    width: 14px;
    height: 14px;
    background: 0 0;
    border-radius: 50%;
    border: 2px solid #e9eaec;
    border-color: #e9eaec #e9eaec #e9eaec #FF5650;
    animation: btn-spin .6s linear 0s infinite;
  }
  @keyframes btn-spin{
    0%{
      transform:rotate(0deg);
    }
    100%{
      transform:rotate(360deg);
    }
  }
</style>
<body>
  <div class='box'></div>
</body>
</html>

　　

 

posted @ 2020-09-23 16:51  进心进利  阅读(161)  评论(0)    收藏  举报