javascript - 圆弧进度条

Question

我需要制作一个圆形进度条(下图)，加载从左下角开始到右下角。浅蓝色 (#E8F6FD) 颜色为空状态，深蓝色 (#1CADEB) 为进度。

我尝试了一些方法，但找不到最适合此实现的方法:

1. 首先，我尝试将 div 元素与 border-radius: 50%; 和 border-bottom-color: transparent; 一起使用, jsfiddle .在这种方法中，我得到了一个与图片中完全一样的形状，但问题是如何用进度填充边框？
2. 第二次尝试使用 canvas，这种方法很好，因为加载器仅在所有 JS 加载后才出现在屏幕上，我想防止这种行为并在页面打开时立即显示加载器加载， jsfiddle

所以我的问题是是否有任何其他方法可以实现arc loader 或针对所列问题的任何建议。

Answer 1

您可以使用 inline SVG与 arc commands制作弧形。可以通过转换 stroke-dasharray 使用 CSS 处理动画。属性(property)。

这是一个例子，将圆弧悬停以启动加载动画:

svg {
  display: block;
  width: 40%;
  margin: 0 auto;
}
.loader {
  stroke-dasharray: .5 18 19;
  transition: stroke-dasharray 2s linear;
}
svg:hover .loader {
  stroke-dasharray: 19 0 19;
}

<svg viewbox="0 0.5 10 8">
  <path d="M2 8 A 4 4 0 1 1 8 8" fill="none" stroke-width="0.78" stroke="#E8F6FD" />
  <path class="loader" d="M2 8 A 4 4 0 1 1 8 8" fill="none" stroke-width="0.8" stroke="#00ACEE" />
</svg>

请注意，您需要将 vendor 前缀添加到过渡属性以获得浏览器支持(更多信息请参见 canIuse)。