弧进度条

Question

我需要制作一个圆形进度条(下图),从左下侧到右下侧加载开始.浅蓝色(#E8F6FD)为空状态,强蓝色(#1CADEB)为进度.

我尝试了一些方法,但找不到最适合这种方法的方法:

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

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

Answer 1

您可以使用带有弧命令的内联SVG来制作弧形.可以通过转换stroke-dasharray属性来使用CSS处理动画.

这是一个示例,将弧悬停在以启动加载动画:

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>

请注意,您需要在转换属性中添加供应商前缀以获得浏览器支持(有关canIuse的更多信息).

Answer 2

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>