SVG环型加载动画

下载代码

html

css

分享到微信朋友圈

html

<div class="wrapper">
  <ul>
    <li>
      <svg class="arc" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
        <path id="arc" fill="none" d="M 49.99 10.00 A 40.00 40.00 0 1 0 50.00 10.00"  />
        <path id="graph" style="--val: 78;" fill="none" d="M 49.99 10.00 A 40.00 40.00 0 1 0 50.00 10.00"  />
        <text x="36" y="55" class="heavy">78%</text>
      </svg>
      <h3>HTML</h3>
    </li>
    <li>
      <svg class="arc" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
        <path id="arc" fill="none" d="M 49.99 10.00 A 40.00 40.00 0 1 0 50.00 10.00"  />
        <path id="graph" style="--val: 63;" fill="none" d="M 49.99 10.00 A 40.00 40.00 0 1 0 50.00 10.00"  />
        <text x="36" y="55" class="heavy">63%</text>
      </svg>
      <h3>JS</h3>
    </li>
    <li>
      <svg class="arc" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
        <path id="arc" fill="none" d="M 49.99 10.00 A 40.00 40.00 0 1 0 50.00 10.00"  />
        <path id="graph" style="--val: 72;" fill="none" d="M 49.99 10.00 A 40.00 40.00 0 1 0 50.00 10.00"  />
        <text x="36" y="55" class="heavy">72%</text>
      </svg>
      <h3>CSS</h3>
    </li>
  </ul>
</div>
<h3>Hover me</h3>

css

JavaScript

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg