在观看视频时经常遇到卡顿，此时屏幕中间通常会有一个圆圈一直在转，作为一种正在加载的显示
其实，它可以通过CSS3的动画实现
实现方法
由围成一个圈的一些小圆点，然后顺时针方向，逐个半径变小，再变大，也就是消失再出现的过程，每个点变小不是同时的，设置相同的时间差，就能形成加载中的视觉效果.
首先，在一个块中绘制4个小圆点，为了明显，先设置一下边框，后面删除即可
<div class="circleBox"><p></p><p></p><p></p><p></p></div>
然后让其固定在屏幕正中央，再分别将4个点放到边框4个角上，如图所示
/*居中显示*/.circleBox{position: absolute;top: 50%;left: 50%;margin: -20px 0 0 -20px;width: 40px;height: 40px;/*border: 1px solid red;*/}/*4个点居于四个角*/p:nth-of-type(1){position: absolute;left: 0;top: 0;}p:nth-of-type(2){position: absolute;right: 0;top: 0;}p:nth-of-type(3){position: absolute;right: 0;bottom: 0;}p:nth-of-type(4){position: absolute;left: 0;bottom: 0;}
4个点看着太稀疏，我们上面整个框复制一遍，也放在屏幕正中央，不需要另外写太多CSS代码，然后将其旋转45度,实现下面的效果
/*复制上面的4点环，再旋转45度*/.circleBox:nth-of-type(2){transform: rotate(45deg);}
去除边框之后，效果如下
接下来，就是实现圆点相继变小的过程，我们给所有的圆点设置动画，使其依次慢慢消失
@keyframes move{0%{transform:scale(0);}50%{transform:scale(1);}100%{transform:scale(0);}}
设置时间差
/*设置时间差*/.circleBox:nth-of-type(1) p:nth-of-type(1){animation-delay:-0.1s;}.circleBox:nth-of-type(2) p:nth-of-type(4){animation-delay:-0.3s;}.circleBox:nth-of-type(1) p:nth-of-type(4){animation-delay:-0.5s;}.circleBox:nth-of-type(2) p:nth-of-type(3){animation-delay:-0.7s;}.circleBox:nth-of-type(1) p:nth-of-type(3){animation-delay:-0.9s;}.circleBox:nth-of-type(2) p:nth-of-type(2){animation-delay:-1.1s;}.circleBox:nth-of-type(1) p:nth-of-type(2){animation-delay:-1.3s;}.circleBox:nth-of-type(2) p:nth-of-type(1){animation-delay:-1.5s;}
大概思路就是这样了，整个代码文件以及效果演示视频，请前往
/zhangtsh5/loading-display.git
