Loading 动画 - 无限符号，HTML/Vue代码在线实时编辑、预览

<svg class="container" x="0px" y="0px" viewBox="0 0 55 23.1" height="23.1" width="55" preserveAspectRatio='xMidYMid meet'>  <path class="track" fill="none" stroke-width="4" pathlength="100" d="M26.7,12.2c3.5,3.4,7.4,7.8,12.7,7.8c5.5,0,9.6-4.4,9.6-9.5C49,5,45.1,1,39.8,1c-5.5,0-9.5,4.2-13.1,7.8l-3.4,3.3c-3.6,3.6-7.6,7.8-13.1,7.8C4.9,20,1,16,1,10.5C1,5.4,5.1,1,10.6,1c5.3,0,9.2,4.5,12.7,7.8L26.7,12.2z" />  <path class="car" fill="none" stroke-width="4" pathlength="100" d="M26.7,12.2c3.5,3.4,7.4,7.8,12.7,7.8c5.5,0,9.6-4.4,9.6-9.5C49,5,45.1,1,39.8,1c-5.5,0-9.5,4.2-13.1,7.8l-3.4,3.3c-3.6,3.6-7.6,7.8-13.1,7.8C4.9,20,1,16,1,10.5C1,5.4,5.1,1,10.6,1c5.3,0,9.2,4.5,12.7,7.8L26.7,12.2z" /> </svg>

            
                1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49

            
            /* 设置页面基本样式，使内容居中显示 */
body {
    background: #282c34;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 容器样式：定义动画的基本参数 */
.container {
    --uib-size: 55px;            /* 控制整体大小 */
    --uib-color: #c7f93e;        /* 定义动画颜色 */
    --uib-speed: 1.3s;           /* 控制动画速度 */
    --uib-bg-opacity: .1;        /* 背景轨道透明度 */
    height: calc(var(--uib-size) * (2.1 / 5));
    width: var(--uib-size);
    transform-origin: center;
    overflow: visible;
}

/* 移动车辆的样式：定义运动效果 */
.car {
    fill: none;
    stroke: var(--uib-color);
    stroke-dasharray: 15, 85;     /* 创建虚线效果，15为实线长度，85为间隔 */
    stroke-dashoffset: 0;
    stroke-linecap: round;
    animation: travel var(--uib-speed) linear infinite;
    will-change: stroke-dasharray, stroke-dashoffset;
    transition: stroke 0.5s ease;
}

/* 轨道样式：显示车辆运动的路径 */
.track {
    stroke: var(--uib-color);
    opacity: var(--uib-bg-opacity);
}

/* 定义车辆运动的关键帧动画 */
@keyframes travel {
    0% {
        stroke-dashoffset: 0;     /* 动画开始位置 */
    }

    100% {
        stroke-dashoffset: 100;   /* 动画结束位置 */
    }
}