loading生产计划

.loading-css{width:50px;/*先把加载区域变成正方形*/height:50px;显示：内联块；/*将加载区域变成内联元素，防止旋转时100%宽度旋转*/border:3pxsolid#f3f3f3;/*设置周围边框的大小，颜色设置为浅白色*/border-top:3pxsolidred;/*设置上边框的颜色为红色高亮，这样旋转的时候可以看到旋转的效果*/border-radius:50%;/*边框和内容区域变成圆形*/}@keyframesloading-360{0%{transform:rotate(0deg);/*在动画开始时旋转0度*/}100%{transform:rotate(360deg);/*在动画结束时旋转360度*/}}.loading-css{/*在之前的CSS基础上添加动画效果*/animation:loading-3600.8sinfinitelinear;/*给环添加旋转360动画的度数，而且是无限次*/}此时效果如下：2.通过svg画一个圆.loading-svg{width:50px;/*设置svg显示区域的大小*/height:50px;动画：loading-rotate1.5sinfiniteease-in-out；/*为svg添加一个旋转动画*/}.path{stroke:#409eff;/*为画笔设置颜色*/stroke-width:2;/*设置线条的宽度*/stroke-dasharray:95,126;/*设置虚线长度为95，虚线长度为126*/stroke-dashoffset:0;/*设置虚线的偏移位置*/animation:loading-dash1.5sease-in-outinfinite;}@keyframesloading-dash{0%{stroke-dasharray:1,126;/*实线部分1，虚线部分126*/stroke-dashoffset:0;/*前面的1/126显示实线，后面的125显示空白*/}50%{stroke-dasharray:95,126;/*实线部分95，虚线部分126*/stroke-dashoffset:-31px/*顺时针偏移31/126，即前31/126显示为空白，后3/4显示行*/}到{中风-dasharray:6,120;/*实线部分6，虚线部分120*/stroke-dashoffset:-120px;/*laststroke时针偏移120/126，即前120/126显示空白，后6点显示线条部分*/}}@key帧加载旋转{到{变换：旋转（1turn）;//旋转1圈}}此时效果如下：3.通过iconfont字体图标，可以直接将圆环的绘制替换为iconfont字体图标，直接以字体的形式显示出来圆环，然后给它加上一个旋转动画，比如：我们可以去iconfont网站下载喜欢的Loadingpattern。字体图标下载完成后，将解压后的内容复制到项目中，并在页面中导入iconfont.css，在元素中添加iconfont类样式，即可显示字体图标。具体代码导入方法请参考demo_index.html文件。导入方式一共有三种，我目前使用的是第二种。代码如下：.icon-Loading{显示：内联块;颜色：#0086B3；字体大小：40px；animation:rotating2sinfinitelinear;}@keyframesrotating{0%{transform:rotate(0deg)/*动画起始位置为0度旋转*/}to{transform:rotate(1turn)/*结束位置动画是旋转1圈*/}}此时效果如下：