技术博客
首页 所有文章 标签 分类 关于
技术博客

目录

前端技巧三种-Loading-制作方案

 收录于 Weex
   约 2299 字   预计阅读 5 分钟 
https://bing.ee123.net/img/rand?artid=113156848

前端技巧：三种 Loading 制作方案

（给前端开发博客加星标，提升前端技能）

作者：JS_Even_JS

一、简介

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%; /*将边框和内容区域都变成圆形*/
}

此时效果如下:

https://i-blog.csdnimg.cn/blog_migrate/49d04ef5299776bf5e87ae2878a52c41.png
image

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

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

https://i-blog.csdnimg.cn/blog_migrate/6f11f2f7f89e53c889a634198c75b678.png
image

二、通过svg来绘制圆环

SVG 意为可缩放矢量图形（Scalable Vector Graphics），其使用 XML 格式定义图像， 标签可用来创建一个圆，同时外面必须嵌套一个标签。