loading的实现(css3)

效果类似下面：

CSS代码如下：

dot {
    display: inline-block; 
    height: 1em; line-height: 1;
    text-align: left;
    vertical-align: -.25em;
    overflow: hidden;
}
dot::before {
    display: block;
    content: '...\A..\A.';
    white-space: pre-wrap;   /* 也可以是white-space: pre */
    animation: dot 3s infinite step-start both;
}
@keyframes dot {
    33% { transform: translateY(-2em); }
    66% { transform: translateY(-1em); }
}

HTML代码如下：

订单提交中<dot>...</dot>

然后成就即达成！并且IE6-IE9完美自动向下兼容（静态3个点），IE10+就是动画

原文链接：http://www.zhangxinxu.com/wordpress/2016/11/css-content-pre-animation-character-loading/

loading方法2

CSS代码：

.box {
    width: 100px; height: 100px;
    background: url(loading_blue.gif) no-repeat center;
    background: url(loading_blue.png) no-repeat center, linear-gradient(to top, transparent, transparent);
    animation: spin 1s linear infinite;
}

@keyframes spin{
    from {
        transform:rotate(0);
    }
    to {
        transform:rotate(-360deg);
    }
}

HTML代码：

<div class="box"></div>

效果如图：

当为ie9以下时，自动选择GIF图片加载

然理论上使用background-image也是可以的，但是在IE7, IE8浏览器下面，background-image如果是个不认识的东西，他们不会认为这行CSS无效，而是认为你这个背景图有问题，于是会导致IE7,IE8浏览器下连gif loading图片都实现不出来。