Material Design的Loading动画

写在前面：
这是一篇菜鸟的学习笔记，记录效果实现过程，而没有考虑安全、兼容、性等问题。供新手参考，也希望前辈们指点。

这篇文章将一步一步记录实现一个Material Design的Loading动画，该效果模仿自Materialize网站的Loading动画，效果如下：

Materialize网站的效果.gif

我的最终效果.gif

Loading链接展示

实现的小思路：

之前一直在想通过border的方法只能是实现一个完整的圆圈（或缺n*45°的圆圈），但是上面的效果明显是一个可变长度的圆圈的一部分，那么该如何实现呢？后来查看了下Materialize网站Loading部分的css布局。发现原来是另一种思路的实现。Materialize是通过一个小div设置overflow:hidden属性将圆圈的一半给挡住，然后在同个border-left等属性使圆圈只有一半，这样结合transform: rotate()属性选择这一半的圆圈就可以实现非完整圆圈了。而实际上实现上图任意程度的非完整圆圈，需要使用两个div分别各占布局的左右以及两个半圆来实现。具体如何使用，参考详解用CSS3制作圆形滚动进度条动画效果

第一部分动画（去掉外布局旋转的效果）

先来看看Materialize的效果：

去掉外布局旋转的效果.gif

我的实现效果：

动画一.gif

我的实现思路：
大布局下分为两个div，两个div下又有各自的圆圈。同时设置旋转动画以达到该效果。

实现代码：




    
    Material Design Loading Animation

第二部分动画（加上外层布局旋转的效果）

先来看看Materialize的效果：

加上外布局旋转的效果.gif

我的实现效果：

动画二.gif

我的实现思路：
仔细看就会发现这个动画是先从一个点往前进方向伸张，然后又从尾部开始往前进方向收缩成一个点。那么如何通过上面“去掉外布局旋转的效果”基本动画得到“加上外布局旋转的效果”动画呢？从名字当中就可以看出来，答案就是加上外布局的旋转。外布局的动画时间是基本动画时间的两倍，总旋转角度为720°，旋转速度大致与“基本动画”相当（本来应该是一致，但注意到“基本动画”的圆圈伸张距离并没有达到360°，而外布局的动画又要在周期之间灰度过度）。
细心的人会注意到“加上外布局旋转的效果”与“动画二”的效果不大一样：前者的圆圈缺口方向会改变，二后者的方向一直向上。好吧，我承认是我不知道如何做到前者的效果。但看下面“动画三”的效果与Materialize的效果还是比较像的，先这样凑合用着吧！^_
代码实现：




    
    Material Design Loading Animation

第三部分动画（在加一个最外层布局）

先来看看Materialize的效果：

在加最外层布局旋转的效果.gif

我的实现效果：

动画三.gif

我的实现思路：
“动画三”只是在“动画二”的基础上加上了一层旋转，以达到圆圈缺口方向的变化仅此而已。至于圆圈缺口的变化，读者可自行修改animation-wrap动画以及animation-circle动画的时间以调整效果，但是必须保证animation-circle的动画时间一定是animation-circle-left/right的两倍。
实现代码：




    
    Material Design Loading Animation

后续内容

将该效果封装成可复用且方便使用的控件，打算使用js动态生成众多的布局减少html中的代码量。

更新，2016.10.6
完成后续内容，同时增加可设置大小颜色功能

最终效果如下：

是不是和Materialize网站的很接近了。^_

最终效果.gif

代码如下：




    
    Material Design Loading Animation

附上源码：

Loading示例代码