用SVG做一个Loading动画

概述

之前做加载效果都是用的html结合css，这次用SVG感觉还挺省事的

准备

开始做这个加载效果之前，需要先了解一下两个属性，stroke-dasharray和stroke-dashoffset

这两个属性可以看下面张鑫旭大神的文章，说的还是很清楚的

实现

1、基础效果

代码：

    
       
         
      
       加载中
          
        
     
    复制代码

这个基础版比较简单，就是单纯通过stroke-dasharray和stroke-dashoffset两个属性来设置线段分隔长度和偏移量，然后使用animation动画逐渐减少stroke-dashoffset偏移量的值实现

2、加速版

代码：

    
       
         
      
       加载中
          
        
     
    复制代码

基础版比较单调，这个加速版就先不设置默认的stroke-dasharray和stroke-dashoffset，直接在animation动画设置后逐渐减少

3、滚动版

代码：

    
       
         
      
       加载中
          
        
     
    复制代码

除了加速版，还可以弄一个滚动版，利用css3里的rotate为circle添加一个旋转动画之后，整体的加载效果比基础版流畅多了

4、心电图版

代码：

    
       
     
    复制代码

当然也可以用折线做一个心电图版，效果也不错

总结

利用stroke-dasharray和stroke-dashoffset这两个属性制作动效相当实用，结合css3相关动画，可以快速制作简单美观的动画效果