加载动画效果——渐变

接着上一篇简单的加载动画，我们来实现渐变效果的加载动画：

    .loader{
        text-indent: -9999em;   /*隐藏文字*/
        position: relative;
        width: 200px;
        height: 200px;
        border-radius: 50%;  /*使形状轮廓为圆形*/
        background: #fff;
        background: linear-gradient(to right, #ffffff 10%, rgba(255, 255, 255, 0) 50%);
        box-shadow: inset 0 0 0 20px rgba(255, 255, 255, 0.2); /*设置内部阴影，颜色白色，宽度为15像素*/
    }

• linear-gradient：渐变效果，这里表示方向从左到右渐变，从最左侧向右10%位置均为纯白色，再向右到50%的位置渐变为完全透明的白色。https://www.runoob.com/css3/css3-gradients.html按照上面的解释，就很好理解其中参数的含义了。自己觉得动画的效果可以根据自己观察慢慢设计它的参数值。
  

---

下面，我们绘制一个四分之一的圆来转圈，这是圆圈的实体区域：

    .loader::before{
        position: absolute;
        content: "";
        width: 50%;
        height: 50%;
        left: 0;
        border-radius: 100% 0 0 0;
        background: #fff;
        top: 0;
    }

再绘制一个内部的圆圈，是的，这次不是再绘制一个圆用其一半，而是绘制一个比其小的圆圈。由于大圆圈的直径为200像素，轨迹宽度为20像素，因此中央的小圆圈的宽度为160像素。这样正好能将中央区域遮住

    .loader::after{
        background: #4ea980;
        position: absolute;
        content: "";
        width: 160px;    
        height: 160px;
        border-radius: 50%;
        left: 20px;
        top:20px;
    }

最后，我们将其旋转起来即可：

这里要注意一点：这行旋转的代码与上一篇放的位置有做不同，解释一下：
在此动画设计中，我们的大体思路是：loader 类下设置的是一个基本圆，是它在不停的转动； loader::before 设计的是一个四分之一的扇形，为的是实现白色外圈渐变的效果；loader::after 设计的是中间被白色环包围的绿色的内圆，它的作用是遮挡住 loader::before 除去环以外的部分。
所以，动画执行代码放到了 loader CSS属性中。

    .loader{
        animation: load-effect 2s infinite linear;
    }