CSS3实现loading图 - 码农教程

HTML5学堂：学习CSS3，重要的并不是那几个命令，而是如何应用CSS3的知识实现网站中的效果，换句话说，“只有想不到，没有做不到”。在这个效果当中，主要用到了圆角边框和动画。

HTML5学堂-刘国利在此郑重声明：本篇文章的灵感来源于2014年的自己一个学生的技术演讲，他运用CSS3实现了loading图效果，在此书写出来与大家分享。效果创造的原作者——黄仕辉

实现的基本思路：利用圆角边框对loading图的样式控制，让其从方形变化为圆形；之后控制不同的边框粗细，调整更佳的视觉效果；最后利用CSS3中的动画，实现运动；在进行布局的时候，要考虑移动端水平垂直居中的要求以及不同分辨率状态下的效果。

基本效果图

基本html结构搭建

<!doctype html>
<html>
<head>
 <meta charset="UTF-8">
 <title>HTML5学堂 - CSS3 - loading图</title>
 <link rel="stylesheet" href="../common/reset.css">
 <style>
     body,html {
         height: 100%;
     }
     .wrap{
         position: absolute;
         top: 0%;
         right: 0%;
         bottom: 0%;
         left: 0%;
         width: 0px;
         height: 0px;
         padding: 15%;
         margin: auto;
         border: 1px solid #06f;
         border-left-width: 4px;
         border-bottom-width: 3px;
         border-right-width: 2px;
         border-radius: 50%;
     }
 </style>
</head>
<body>
 <div class="wrap"></div>
</body>
</html>

此处采用了一种很特殊的居中方法，将盒模型进行定位处理之后，上下左右均采用了0%的值，然后运用margin:auto的控制，让上下左右自动处理外边距值，从而达到居中的状态。关于元素的水平垂直居中，可点击查看：《网易NEC水平垂直居中》

另一个处理，是宽度高度自适应的设置，在为width和height设置百分比之后，会分别根据父级元素的宽度和高度进行计算，此时一旦设备宽度高度不同，我们的loading图就不再是正圆形，由于padding设置百分比值时，均是按照文字方向计算的（默认都是参照父级的宽度计算），因此此处我们将宽高均设为0，而用padding进行内容区大小的设置。

关于边框的设置已经提到了，四个方向采用不同的边框粗细。

顺便一提，由于使用的是CSS3进行控制，因此，即便是在PC端调整窗口大小，loading图的大小也会随之发生变化。

显示效果

PS：从自己博客(独行冰海)取的图片，所以自然底部就有水印了~~~

CSS3动画设置

之后进行CSS3动画的设置即可，在CSS中代码中增加如下内容：

.wrap{

 -webkit-animation: loading 2s linear infinite;
}

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

当前就已经实现出来了，不过，在测试的时候会发现，出现了滚动条，因此，我们可以给body再增加这样一句代码：

body {
 overflow: hidden;
}

CSS3就已经搞定了~很简单的解决了loading的效果，很适合在移动端应用。