CSS 的loading特效

之前做loading效果都是用的框架自带的，上周正好碰到需要，自己查了下资料，自己写了几个例子。

HTML的结构无非两种，第一自己写span结构；第二用伪元素模拟结构。

第一种：html结构

<div id="preloader_1">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
    </div>

css

#preloader_1{
            position: relative;
            left:50%;
            width:45px;
            height:30px;
        }
        #preloader_1 span{
            display: block;
            width:9px;
            height:5px;
            position: absolute;
            bottom:0;
            background: yellow;
            animation: preloader_1 1.5s infinite ease-in-out;
        }
        #preloader_1 span:nth-child(2){
            left:11px;
            animation-delay: .2s;
        }
        #preloader_1 span:nth-chi