三种Loading制作方案
时间：2023-04-05 01:28:57
HTML5
1.介绍Loading是一个几乎在每个应用程序中都会用到的组件。很多组件库都会提供相应的Loading组件，但是有时候我们可能需要自定义Loading效果，掌握Loading组件制作的基础知识就会变得非常有必要。loading主要是一个旋转环，旋转部分比较简单，直接通过css动画就可以实现，所以关键部分就是获取loading环。2.通过border-radius画一个圆环我们通常会先将一个元素设置为等长等宽的正方形，然后设置这个元素的border-radius值为50%，这样就可以把一个元素画成圆了。需要注意的是border-radius:50%是让整个方形元素变成圆形，包括边框和内容区域。所以我们可以通过控制元素的边框和内容区域的大小来画一个圆环，以元素的内容区域为内圈，以元素的边框区域为外圈。
.loading-css{width:50px;/*先把加载区域改成正方形*/height:50px;显示：内联块；/*将加载区域更改为行内元素，以防止旋转，100%宽度旋转*/border:3pxsolid#f3f3f3;/*设置周围边框的大小，颜色设置为浅白色*/border-top:3pxsolidred;/*设置上边框颜色为红色高亮，这样旋转的时候可以看到旋转的效果*/border-radius:50%;/*把边框和内容区域变成一个圆圈*/}效果如下：circle圆环效果出来了，然后让圆环旋转，如：@keyframesloading-360{0%{transform：旋转（0度）；/*在动画开始时旋转0度*/}100%{transform:rotate(360deg);/*动画结束旋转360度*/}}.loading-css{/*在之前的CSS基础上添加动画效果*/animation:loading-3600.8sinfinitelinear;/*在圆环上添加一个旋转360度的动画，并且是无限次*/}二、通过svg绘制圆环SVG是指可缩放矢量图形（ScalableVectorGraphics），它使用XML格式来定义图像，其
标签可以用来创建一个圆，外面必须嵌套一个.loading-svg{宽度：50px；/*设置svg显示区域的大小*/height:50px;}
