利用svg的path路径属性制作loading加载动画

利用svg-path属性制作加载旋转动画

类似于此

.container{
    
    
    display: flex;
    align-items: center;
    justify-content: center;
    height: 400px;
}
.circle{
    
    
    width:4px;
    height: 4px;
    background:red;
    border-radius: 50%;
    offset-path:path("M0,0a 20,20 0 1,0 40,0a 20,20 0 1,0 -40,0");
    offset-rotate:0deg;
    position: relative;
    transform:scale(1.5);
    position: absolute;
    top:130px;
    left:130px;
}
.circle-1{
    
    
    background:#814AB1;
    animation:load 1.8s cubic-bezier(0.86, 0, 0.07, 1) infinite;
    animation-delay: 0.147s;
    animation-fill-mode: forwards;
    z-index: 99;
}
.circle-2{
    
    
    background: #4cbdc9;
    animation: load 1.8s cubic-bezier(0.86, 0, 0.07, 1) infinite;
    animation-delay: 0.294s;
    animation-fill-mode: forwards;
    z-index: 98;
}
.circle-3{
    
    
    background: #ffce24;
    animation: load 1.8s cubic-bezier(0.86, 0, 0.07, 1) infinite;
    animation-delay: 0.441s;
    animation-fill-mode: forwards;
    z-index: 97;
}
.circle-4{
    
    
    background: #ff2d74;
    animation: load 1.8s cubic-bezier(0.86, 0, 0.07, 1) infinite;
    animation-delay: 0.588s;
    animation-fill-mode: forwards;
    z-index: 96;
}
@keyframes load {
    
    
    from {
    
    
        offset-distance: 0;
    }to{
    
    
        offset-distance: 100%;
    }
}

<div class="container">
  <div class="circle circle-1"></div>
  <div class="circle circle-2"></div>
  <div class="circle circle-3"></div>
  <div class="circle circle-4"></div>
</div>

主要是用到css3属性offset-path/offset-rotate，兼容性不好，只有chrome实现了好像。Ie11/edge实测不生效。

纯svg实现

纯svg实现无兼容性问题，不过该svg代码还不到位。

<svg width="300px" height="175px" version="1.1">
    <path fill="transparent" stroke="#888888" stroke-width="1" d="M50,50 a 20,20 0 1,0 40,0a 20,20 0 1,0 -40,0" class="path"></path>
    <circle class="demo1" cx="0" cy="0" r="1" fill="none" stroke="#814AB1" stroke-width="6">
        <animateMotion fill="freeze" dur="3s" from="0" to="100" repeatCount="indefinite" path="M50,50 a 20,20 0 1,0 40,0a 20,20 0 1,0 -40,0" begin="0s;op.end+0s"></animateMotion>
    </circle>
    <circle class="demo2" cx="0" cy="0" r="1" fill="none" stroke="#4cbdc9" stroke-width="6">
        <animateMotion fill="freeze" dur="3s" from="0" to="100" repeatCount="indefinite" path="M50,50 a 20,20 0 1,0 40,0a 20,20 0 1,0 -40,0" begin="0.3s;op.end+0.3s"></animateMotion>
    </circle>
    <circle class="demo3" cx="0" cy="0" r="1" fill="none" stroke="#ffce24" stroke-width="6">
        <animateMotion fill="freeze" dur="3s" from="0" to="100" repeatCount="indefinite" path="M50,50 a 20,20 0 1,0 40,0a 20,20 0 1,0 -40,0" begin="0.6s;op.end+0.6s"></animateMotion>
    </circle>
    <circle class="demo4" cx="0" cy="0" r="1" fill="none" stroke="#ff2d74" stroke-width="6">
        <animateMotion fill="freeze" dur="3s" from="0" to="100" repeatCount="indefinite" path="M50,50 a 20,20 0 1,0 40,0a 20,20 0 1,0 -40,0" begin="0.9s;op.end+0.9s"></animateMotion>
    </circle>
</svg>