SVG解决方案

Question

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

我尝试了一些方法，但找不到最佳方法：

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

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

Answer 1

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

请注意，您需要在转换属性中添加供应商前缀以获得浏览器支持（有关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>

弧进度条

2 个答案:

SVG解决方案