loading动画（非gif）

降低服务压力，不用gif，纯css加动画，主要是box-shadow，外面的四色边框加个动画也可以转起来。生产环境中用js做dom操作即可

<div class="small">
    <div></div>
</div>




/*p138*/
.small div{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    width: 4px;
    height: 4px;
    border-radius: 2px;
    /*水平、垂直、模糊距离、阴影尺寸*/
    box-shadow: 0 -12px 0 2px red,
    0 12px 0 1px #333,
    -12px 0 0 1px #333,
    -9px -9px 0 1px #333,
    9px -9px 0 2px #333,
    -9px 9px 0 1px #333,
    9px 9px 0 1px #333;
    /*keyframe 名称/完成动画所花费的时间/速度/启动时间/是否应该轮流反向播放动画*/
    animation:loading 1.2s linear 0s infinite;
}
@keyframes loading {
    /*角度*/
    from{
        transform: rotate(0deg);
    }
    to{
        transform: rotate(360deg);
    }
}
@keyframes foxfire {
    /*角度*/
    from{
        transform: rotate(0deg);
    }
    to{
        transform: rotate(360deg);
    }
}