我正在参加「码上掘金挑战赛」详情请看：码上掘金挑战赛来了！

今天闲暇时看到很多网页都有等待的效果，不仅好看同时也能给用户带来很好的产品体验，我们来实现一个简单的等待框!

页面结构

页面结构比较简单，就一个等待框盒子

 <div class="wait"></div>

初始样式

由于我们内容都是放在body元素中，所以需要清除body的内外边距，通过flex布局实现垂直水平居中，然后设置好背景色，由于body元素没有高度，所以我们使用css的vh单位进行设置，因为vh单位是把屏幕的高度分成了100份，1vh等于屏幕高度的百分之一，我们这里设置为100vh

 body {
   height: 100vh;
      padding: 0;
      margin: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      background: #000;
    }

等待框实现

我们给等待框设置好宽高，再通过CSS的border-radius属性将等待框设置为圆形，设置为圆形之后给边框大小并好设为实线，在将右边框设置为白色，这样比较显眼，最后通过CSS的transform-origin属性，将旋转点设置到等待框的正中间

    .wait  {
      width: 200px;
      height: 200px;
      border-radius: 50%;
      border: 10px solid #0f9eebc0;
      border-right-color: white;
      transform-origin: center center;
    }

等待框的旋转实现

等待框的旋转效果我们需要使用到CSS动画进行实现，我们先声明一个动画，通过动画去控制CSS的transform:rotate属性，对其进行旋转，让其旋转为360度，这样正好为一圈，最后我们给等待框盒子设置上动画，匀速进行动画且无限循环

    .wait{
      animation: rotate 1s linear infinite;
    }

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

代码已放到码上掘金！