常用的 Loading 制作方案

三种 Loading 制作方案

目录

三种 Loading 制作方案

一、简介

二、通过border-radius绘制圆环

二、通过svg来绘制圆环

三、通过iconfont字体图标

---

一、简介

Loading几乎是每个应用都会用到的一个组件。很多组件库都会提供相应的Loading组件，但是有的时候我们可能需要自定义Loading效果，掌握Loading组件制作的基础知识将变得非常必要。Loading主要就是一个旋转的圆环，而旋转部分则比较简单，直接通过CSS动画即可实现，所以关键部分就是得到Loading的圆环。

二、通过border-radius绘制圆环

我们通常让一个元素变成圆形是先将一个元素设置为长和宽相等的正方形，然后给这个元素设置一个border-radius值为50%。需要注意的是，border-radius: 50%是让整个正方形元素都变成圆形，即包括边框和内容区。所以我们可以通过控制元素边框和内容区的大小，将元素的内容区域作为内圆，将元素的边框区域作为外圆，从而绘制出一个圆环。

<div class="loading-css"></div>

.loading-css {
      width: 50px; /*先将loading区域变成正方形*/    height: 50px;    display: inline-block; /*将loading区域变成行内元素，防止旋转的时候，100%宽度都在旋转*/    border: 3px solid #f3f3f3; /*设置四周边框大小，并将颜色设置为浅白色*/    border-top: 3px solid red; /*将上边框颜色设置为红色高亮，以便旋转的时候能够看到旋转的效果*/    border-radius: 50%; /*将边框和内容区域都变成圆形*/}

 

此时效果如下:

圆环效果已经出来了，接下来让圆环旋转起来即可，如:

@keyframes loading-360 {
      0% {
          transform: rotate(0deg); /*动画起始的时候旋转了0度*/    }    100% {
          transform: rotate(360deg); /*动画结束的时候旋转了360度*/    }}.loading-css { /*在之前的CSS中加上动画效果即可*/    animation: loading-360 0.8s infinite linear; /*给圆环添加旋转360度的动画，并且是无限次*/}

二、通过svg来绘制圆环

SVG 意为可缩放矢量图形（