纯html+css实现Element loading效果

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

分析

动画由两部分组成：
蓝色的弧线由点伸展成一个圆，又从圆收缩成一个点。

圆的父节点带着圆旋转

代码
html

1. <svg viewBox="25 25 50 50" class="box">
2.     <circle cx="50" cy="50" r="20" fill="none" class="circle"></circle>
3. </svg>

复制代码

css
默认样式

1. .box {
2.     height: 200px;
3.     width: 200px;
4.     background: wheat;
5. }
6. .box .circle {
7.     stroke-width: 2;
8.     stroke: #409eff;
9.     stroke-linecap: round;
10. }

复制代码

添加动画效果

1. /* 旋转动画 */
2. @keyframes rotate {
3.     to {
4.         transform: rotate(1turn)
5.     }
6. }
7. /* 弧线动画 */
8. /* 125 是圆的周长 */
9. @keyframes circle {
10.     0% {
11. /* 状态1: 点 */
12.         stroke-dasharray: 1 125;
13.         stroke-dashoffset: 0;
14.     }
15.     50% {
16. /* 状态2: 圆 */
17.         stroke-dasharray: 120, 125;
18.         stroke-dashoffset: 0;
19.     }
20.     to {
21. /* 状态3: 点（向旋转的方向收缩） */
22.         stroke-dasharray: 120 125;
23.         stroke-dashoffset: -125px;
24.     }
25. }
26. .box {
27.   /* ...同上 */
28.   animation: rotate 2s linear infinite;
29. }
30. .circle {
31.   /* ...同上 */
32.   animation: circle 2s infinite;
33. }

复制代码

最后把背景去掉

在线代码演示 https://jsbin.com/yarufoy/edit?html,css,output
到此这篇关于纯html+css实现Element loading效果的文章就介绍到这了,更多相关html+css实现 loading内容请搜索中国红客联盟以前的文章或继续浏览下面的相关文章，希望大家以后多多支持中国红客联盟！