纯CSS使用animation实现Loading效果

效果图

代码实现

HTML

为5个div添加样式后就可以得到5个圆

    <div class="container">
        <div class="point"></div>
        <div class="point"></div>
        <div class="point"></div>
        <div class="point"></div>
        <div class="point"></div>
    </div>

CSS

居中

*{
   
   margin: 0;
   padding: 0;
   box-sizing: border-box;
}
body{
   
   width: 100%;
   height: 100vh;
   background-color: #222;
   display: flex;
   justify-content:center;
   align-items: center;
}
.container{
   
   display: flex;
}

五个圆

.container .point{