圆弧进度条

Question

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

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

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

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

Answer 1

SVG 解决方案

这是一个带有 SVG 的圆形动画，仅 CSS。
创建这个需要一些时间来获得正确的时间 XD 我所做的是为 svg 路径设置动画 stroke-dasharray；并旋转它，这样它就可以创建半半圆加载。

body {
  background-color: #222;
}
.load {
  fill: none;
  stroke: #e8f6fd;
  stroke-width: 5;
  stroke-dasharray: 200 300;
  transform: rotate(142deg);
  transform-origin: 50px 50px;
  animation: progress 5s linear reverse;
}
@keyframes progress {
  from {
    stroke-dasharray: 200 300;
  }
  to {
    stroke-dasharray: 0 300;
  }
}
.spesial {
  stroke: #1cadeb;
  stroke-dasharray: 5 300;
  transform: rotate(30deg);
  animation: circpro 5s linear;
}
@keyframes circpro {
  from {
    transform: rotate(-220deg);
  }
  to {
    transform: rotate(30deg);
  }
}

<svg viewBox="0 0 100 100" width="200px">
  <circle class="load" cx="50" cy="50" r="45" />
  <circle class="load spesial" cx="50" cy="50" r="45" />
</svg>

Answer 2

您可以使用 inline SVG with arc commands to make the arc shape. The animation can be handled with CSS by transitioning the stroke-dasharray 属性。

这里有一个例子，悬停圆弧启动加载动画：

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>

请注意，您需要将供应商前缀添加到转换属性以获得浏览器支持（有关 canIuse 的更多信息）。

圆弧进度条

Arc progress bar

javascript

css

svg

css-shapes

SVG 解决方案