用纯CSS3制作超酷的Loading加载提示

作者:课课家教育更新于： 2016-10-14 16:23:17

　    自图片在网页中普及的年代开始，web开发者就要面临这样的一个问题：如何让用户看到各元素当前加载的进度，从而使他们耐心地等待页面加载完成。这时候，Web开发者就要制作一些Loading进度条来显示当前加载的百分比。

　　单单显示百分比的数字往往会很单调，内容较多或者网速较慢的话，用户看久了可能会发呆，也容易失去等待的耐性。所以，为了减少用户流失的几率，提高对用户的吸引力，Web开发者在Loading效果的设计上就要花上一点心思了。

　　我们课课家网站给大家整理一些好看的Loading特效，这些Loading都有一个特点，就是无法汇报具体进度数字（比如用户注册，需要等待服务端处理）的时候也能用上，所以通用性很强。

　　比较常用的要数第1行第2个的圆圈进度条，我们就以此为例学习Loading的制作技巧。

　　首先来编写基础的html代码：

　　接下来我们分析整个Loading的结构，它就是一个圆，所以长期关注css3绘图的朋友应该第一时间就想到，用50%的border-radius即可完成圆的绘制。

　　首先我们把边框绘制出来。

　　.circle-loading{

　　width:25px;

　　height:25px;

　　border:2px solid #fff;

　　}

　　运行效果如下图所示：

　　然后就可以用50%的border-radius实现了。

　　.circle-loading{

　　/*其它样式代码省略*/

　　-webkit-border-radius:50%;

　　-moz-border-radius:50%;

　　-o-border-radius:50%;

　　border-radius:50%;

　　}

　　4行代码功能一致，不同前缀用于兼容不同的浏览器。

　　运行效果如下图所示：

　　现在，我们就应该构建一条颜色深一点的Loading轨道了。这个轨道要这么做？用before或者after伪元素插入？大可不必。我们都知道这个圆是从上面的4条直线边框演变过来的，而4条边可以拥有不同的颜色。因此，我们让其中三条边显示为黑色，另一条边继续显示白色即可。

　　为了方便在一行里面编写4种颜色，我们把border-color部分从border里抽离出来，代码如下：

　　.circle-loading{

　　/*其它样式代码省略*/

　　border:2px solid;

　　border-color:#fff #000 #000 #000;

　　}

　　4条边的颜色用英文空格隔开，顺序依次为上，右，下，左（即从上开始顺时针数过来）。

　　运行效果如下图所示：

　　感觉黑色有点深了，我们可以把颜色调浅一些。但为了让这个Loading适应更多的背景，我们不妨用CSS3的新功能——rgba来实现半透明的黑色，这样的话，进度条跟不同背景都可以很好地融合到一起。

　　.circle-loading{

　　/*其它样式代码省略*/

　　border:2px solid;

　　border-color:#fff rgba(0,0,0,0.2) rgba(0,0,0,0.2) rgba(0,0,0,0.2);

　　}

　　我们用20%不透明度的黑色来填充进度条的轨道，运行效果如下图所示。

　　现在效果不错了，但你可能觉得重复写3次rgba有点浪费空间，所以你可能更倾向于以下写法。

　　.circle-loading{

　　/*其它样式代码省略*/

　　border:2px solid rgba(0,0,0,0.2);

　　border-top-color:#fff;

　　}

　　现在，我们可以让Loading条旋转起来了。对于CSS3来说，这样的动画实现起来非常简单，利用animation即可实现。而旋转的角度则由transform中的rotate来控制。

　　animation在CSS3里面是一个名称，这个名称所指定的具体效果由@keyframes规则进行控制。

　　现在我们来编写@keyframes

　　整段代码并不复杂，意思就是从0度旋转到360度，共旋转一周。所以起始和结束的状态重合，适合实现无限循环。代码之所以这么长，完全是为了用不同前缀兼容浏览器而已。

　　.circle-loading{

　　/*其它样式代码省略*/

　　-webkit-animation:rotating 0.75s;

　　-moz-animation:rotating 0.75s;

　　-o-animation:rotating 0.75s;

　　animation:rotating 0.75s;

　　}

　　animation也同样需要用前缀兼容不同浏览器。

　　运行效果如下图所示，进度条动起来了，实际上轨道也在转，只不过圆周的旋转看不出来而已。

　　现在还剩下两个问题，一是只旋转了一周就停了下来，二是有种先快后慢的感觉。这是因为这两种现象都是动画的默认效果。要更改这些状态，我们可以在animation里面传入一些参数进行控制。

　　.circle-loading{

　　/*其它样式代码省略*/

　　-webkit-animation:rotating infinite 0.75s linear;

　　-moz-animation:rotating infinite 0.75s linear;

　　-o-animation:rotating infinite 0.75s linear;

　　animation:rotating infinite 0.75s linear;

　　}

　　infinite是无穷的意思，代表无限循环，而linear则指示浏览器使用线性函数进行动画控制，实现出来的是匀速运动的效果。

　　再次运行，Loading效果循环播放了，而且速度始终保持不变。至此，Loading效果的制作就完成了。

　　时下，天朝的网速显然跟不上时代，导致各种设计精良的网站在国人的设备上需要等待很久才可以完全打开，使得用户停留在Loading页面的时间非常地长，而绝非一闪而过。所以跟首页相比，Loading更像是网站的门面，其效果的好坏直接影响用于对网站的第一印象，因此Web设计师都会尽自己最大努力把这个看似无关痛痒的细节给刻画得淋漓尽致。