使用CSS逐步创建和填充弧-圆进度栏 [英] Create and Filling arc progressively with css - circle progress bar

问题描述

我正在努力像进度条一样填补弧线，因为我与css的配合不是很好。

I'm struggling to fill an arc like a progress bar because I'm not that good working with css.

我想实现进步弧度像这样：

I want to achieve a "progress" arc like this:

我遇到了这个问题： https://codepen.io/enslavedeagle/pen/AXzaKE

#arc,
#arc::before {
  display: block;
  box-sizing: border-box;
  border-radius: 100%;
  width: 100px;
  height: 100px;
  position: absolute;
  background-color: transparent;
  padding: 0;
  margin: 0;
}

#arc {
  border: solid #00BBEE 12px;
  clip: rect(0px, 100px, 50px, 0px);
  margin: 25px;
}

#arc::before {
  content: '';
  border: solid black 12px;
  top: -12px;
  left: -12px;
  clip: rect(0px, 100px, 50px, 0px);
  transform: rotate(-150deg);
  /* define the fill length, using the rotation above.
     from -180deg (0% fill) to 0deg (100% fill) */
  /* if you have a better solution to make thing like this 
     work, please let me know! :) */
}

并尝试进行自定义，使其与我想要的一样，但是直到现在都没有成功：这里： https://codepen.io/anon/pen/qpNrEP

and try to customize to be like what I want to but with no sucess until now: here: https://codepen.io/anon/pen/qpNrEP

有人可以为此提供帮助吗？

Could any one give some help with this? Can also be alternative solution to achieve this.

我很感激

亲切的问候，

推荐答案

您可以使用SVG，将SVG的两个圆弧放在另一个圆弧上，然后使用 stroke-dash-array 。

You can use an SVG with two arc on on top of the other and then use stroke-dash-array.

svg {
  height: 90vh;
  margin: auto;
  display: block;
}

path {
  stroke-linecap: round;
  stroke-width: 2;
}

path.grey {
  stroke: lightgrey;
}

path.purple {
  stroke: purple;
  stroke-dasharray: calc(40 * 3.142 * 1.85);
  stroke-dashoffset: 20;
  /* adjust last number for variance */
}

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 100 100">
    <path class="grey" d="M40,90
             A40,40 0 1,1 60,90"
          style="fill:none;"/>
    <path class="purple" d="M40,90
             A40,40 0 1,1 60,90"
          style="fill:none;"/>
</svg>

这篇关于使用CSS逐步创建和填充弧-圆进度栏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！