css3实现圆形进度加载动画

使用到的css3属性有border-radius,transform,animation,clip等，在这里着重讲一下clip这个属性。因为博主也是第一次用这个属性。。。

这个属性就是规定盒子内显示的区域，可以有的值有auto（默认），有inherit：从父类继承，还有就是添加rect(top,right,bottom,left)。就是规定一下显示区域，只有盒子内从盒子的左上角的顶点做位置对比，只有在这四个值内的区域才能够显示出来。

重点：这个属性必须在绝对定位absolute或基于浏览器定位时fixed情况下，才管用。

具体情况还是自己测试一下，就全明白了。这个属性没有过渡效果，如果写到动画当中，它会从切换开始时间和切换时间取中间值，直接切换过去。

下面先上一个实现后的效果的代码，然后我还会再写一个封装好的代码，以便懒人使用。

    
              cOntent=">
    
    
    


    

        

        

    

下午因为项目需求，书写了一个构造函数，支持一些属性的修改，由于用了一下午，比较粗糙，凑合着用吧。只要把函数引入，实例化的时候设置将div的id传入，注意，一定要给div设置定位属性position为absolute或者fixed才管用。

    
              cOntent=">