弧进度条 [英] Arc progress bar

问题描述

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

I need to make a circular progress bar (image below), loading start from left bottom side up to right bottom side. Light-blue (#E8F6FD) color is empty state and strong-blue (#1CADEB) is progress.

我尝试了一些方法，但是找不到最佳的实现方法:

I have tried some approaches, but cannot find the best one for this implementation:

1. 首先，我尝试将div元素与border-radius: 50%;和border-bottom-color: transparent;一起使用， jsfiddle .通过这种方法，我得到的形状与图像完全相同，但是问题是如何用进度填充边界?
2. 第二种尝试是使用画布，这种方法很好，可以预期只有在所有JS加载后加载程序才会出现在屏幕上的原因，我想防止这种情况，并在加载页面时立即显示加载程序， jsfiddle

1. First of all I tried using a div element with border-radius: 50%; and border-bottom-color: transparent;, jsfiddle. In this approach I got a shape exactly like in image but the problem is how can I fill border with progress?
2. The second try was using canvas, and this approach is nice expect the reason that loader appears on the screen only after all JS loaded, I would like prevent this behavior and show loader immediately when page is loaded, jsfiddle

所以我的问题是还有其他方法可以实现电弧装载器或对所列问题的任何建议.

So my question is there any another approaches that can achive an arc loader or any suggestion for listed problems.

推荐答案

您可以使用内嵌SVG 和弧命令制作弧形.通过转换 stroke-dasharray，可以使用CSS处理动画属性.

You can use an inline SVG with arc commands to make the arc shape. The animation can be handled with CSS by transitioning the stroke-dasharray property.

这里是一个示例，将鼠标悬停在弧上以启动加载动画:

Here is an example, hover the arc to launch the loading animation :

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

<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>

请注意，您需要将供应商前缀添加到Transition属性中以支持浏览器(有关 查看全文