如何用HTML+CSS编一个等待的loading效果

发布时间：2023-10-10 14:52:38 所属栏目：语言来源：

导读：这是 Element UI loading 组件的效果图，看起来很酷，我们来实现一下！

分析

动画由两部分组成：

蓝色的弧线由点伸展成一个圆，又从圆收缩成一个点。

圆的父节点带着圆旋转

代码

html

<s

这是 Element UI loading 组件的效果图，看起来很酷，我们来实现一下！

分析

动画由两部分组成：

蓝色的弧线由点伸展成一个圆，又从圆收缩成一个点。

圆的父节点带着圆旋转

代码

html

<svg viewBox="25 25 50 50" class="box">

    <circle cx="50" cy="50" r="20" fill="none" class="circle"></circle>

</svg>

css

默认样式

.box {

    height: 200px;

    width: 200px;

    background: wheat;

}

.box .circle {

    stroke-width: 2;

    stroke: #409eff;

    stroke-linecap: round;

}

添加动画效果

/* 旋转动画 */

@keyframes rotate {

    to {

        transform: rotate(1turn)

    }

}

/* 弧线动画 */

/* 125 是圆的周长 */

@keyframes circle {

    0% {

/* 状态1: 点 */

        stroke-dasharray: 1 125;

        stroke-dashoffset: 0;

    }

    50% {

/* 状态2: 圆 */

        stroke-dasharray: 120, 125;

        stroke-dashoffset: 0;

    }

    to {

/* 状态3: 点（向旋转的方向收缩） */

        stroke-dasharray: 120 125;

        stroke-dashoffset: -125px;

    }

}

.box {

  /* ...同上 */

  animation: rotate 2s linear infinite;

}

.circle {

  /* ...同上 */

  animation: circle 2s infinite;

}

最后把背景去掉

（编辑：驾考网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!