这些圆形进度条是如何填充的？

Question

我发现了一些圆形进度条，但我不知道它们是如何填充的。这是一些代码笔的 link：https://codepen.io/anon/pen/aeEEmx

据我所知，当您使用渐变并添加位置（在本例中为 deg）时，它应该从您指定值的位置开始。例如，css 中进度为 20 class 的线性梯度有一个 18 度，然后另一个线性梯度为 90 度，但我不明白这些值如何一起工作 18 度和 90 度或 -18 度那个 90deg 有 30%。

代码如下：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  background-color: #fff;
  font-family: "Lato", "Arial", "san-serif";
  color: #555;
  font-size: 20px;
  font-weight: 300px;
  text-rendering: optimizeLegibility;
}

.radialProgressBar {
  border-radius: 50%;
  -webkit-transform: translate(50%, 50%);
  transform: translate(50%, 50%);
  width: 100px;
  height: 100px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  background: #ddd;
  margin: 20px;
}

.radialProgressBar .overlay {
  border-radius: 50%;
  width: 80px;
  height: 80px;
  margin: auto;
  background: #fff;
  text-align: center;
  padding-top: 30%;
}

.progress-20 {
  background-image: linear-gradient(18deg, #ddd 50%, transparent 50%), linear-gradient(90deg, #028cd5 50%, #ddd 50%);
}

.progress-30 {
  background-image: linear-gradient(-18deg, #ddd 50%, transparent 50%), linear-gradient(90deg, #028cd5 50%, #ddd 50%);
}

.progress-40 {
  background-image: linear-gradient(-54deg, #ddd 50%, transparent 50%), linear-gradient(90deg, #028cd5 50%, #ddd 50%);
}

.progress-70 {
  background-image: linear-gradient(90deg, #028cd5 50%, transparent 50%), linear-gradient(18deg, #028cd5 50%, #ddd 50%);
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>
  <div class="radialProgressBar progress-20">
    <div class="overlay">20</div>
  </div>
  <div class="radialProgressBar progress-30">
    <div class="overlay">30</div>
  </div>
  <div class="radialProgressBar progress-40">
    <div class="overlay">40</div>
  </div>
  <div class="radialProgressBar progress-70">
    <div class="overlay">70</div>
  </div>
</body>

</html>

Answer 1

这是使用多个重叠渐变制作的。如果您对各种渐变使用不同的颜色，您可以更容易地看到该方法。 90 度渐变将图表切成两半，而另一个（在本例中为 18 度）覆盖了其余的蓝色，只留下相关的蓝色部分可见。

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  background-color: #fff;
  font-family: "Lato", "Arial", "san-serif";
  color: #555;
  font-size: 20px;
  font-weight: 300px;
  text-rendering: optimizeLegibility;
}

.radialProgressBar {
  border-radius: 50%;
  -webkit-transform: translate(50%, 50%);
  transform: translate(50%, 50%);
  width: 100px;
  height: 100px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  background: #ddd;
  margin: 20px;
}

.radialProgressBar .overlay {
  border-radius: 50%;
  width: 80px;
  height: 80px;
  margin: auto;
  text-align: center;
  padding-top: 30%;
}

.oneGradient {
  background-image: linear-gradient(90deg, #028cd5 50%, #ddd 50%);
}

.differentColor {
  background-image: linear-gradient(18deg, #aaa 50%, transparent 50%), linear-gradient(90deg, #028cd5 50%, #ddd 50%);
}

.sameColor {
  background-image: linear-gradient(18deg, #ddd 50%, transparent 50%), linear-gradient(90deg, #028cd5 50%, #ddd 50%);
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>
  <div class="radialProgressBar oneGradient">
    <div class="overlay"></div>
  </div>
  <div class="radialProgressBar differentColor">
    <div class="overlay"></div>
  </div>
  <div class="radialProgressBar sameColor">
    <div class="overlay"></div>
  </div>
</body>

</html>

Answer 2

这个是用 SVG 元素 制作的。虽然很简单。如果你想要 stroke-dasharray 属性运行，就玩玩吧；其中“73”是当前百分比，“100”是总百分比。

.percentage-container {
    width: 280px;
    height: 280px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 100%;
    position: relative;
    overflow: hidden;
}

.progress {
    background-color: rgba(209,218,225,.3);
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    stroke: #FF4C1D;
    stroke-width: 10px;
    stroke-dasharray: 73, 100;
    transition: stroke-dasharray 280ms cubic-bezier(0.4,0,0.2,1);
    -webkit-transition: stroke-dasharray 280ms cubic-bezier(0.4,0,0.2,1);
}

.percentage-inner-container {
    width: 90%;
    height: 90%;
    border-radius: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #FFF;
    z-index: 1;
}

.percentage-amount {
    font-family: 'Arial', sans-serif;
    font-size: 70px;
    color: #34495E;
}

.percentage-amount::after {
    content: '%';
    font-size: 26px;
    position: relative;
    bottom: 30px;
}

<div class="percentage-container">
     <svg class="progress" viewBox="0 0 36 36"><path d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"></path></svg>
     <div class="percentage-inner-container">
          <span class="percentage-amount">73</span>
     </div>
</div>

这些圆形进度条是如何填充的？

How are these circular progress bars filled?

html

css

gradient