4步表格的圆形进度条

Question

寻找循环进度以指示用户在第 4 步中超出了哪一步。

赞第一种形式，共 4 种，第 2 种形式，共 4 种，第 3 种形式，共 4 种，第 4 种形式

下面是预期的屏幕截图。

我得到的例子很少，里面有两个 div。 CSS Progress Circle

虽然我的情况很复杂，但我只需要 4 个步骤。

Answer 1

这是我的解决方案，它只使用了边框和 sudo 元素 before 和 after

这很简单。

注意：这只能用于4步的情况。

.count {
     position: relative;
     width: 40px;
     height: 40px;
     margin-right: 10px;
     display: inline-block;
     border: 1px solid #ffc107;
     border-radius: 50%;
     font-family: Arial;
     color: #888;
}
 .count span {
     position: absolute;
     left: 50%;
     top: 50%;
     transform: translate(-50%, -50%);
     z-index: 2;
}
 .count:after {
     position: absolute;
     content: "";
     background: #fff;
     width: 30px;
     height: 30px;
     border-radius: 50%;
     left: 5px;
     top: 5px;
}
 .count:before {
     position: absolute;
     content: "";
     border: 20px solid #ffc107;
     border-radius: 50%;
     height: 0;
     width: 0;
     transform: rotate(45deg);
}
 .count.step1:before {
     border-left-color: transparent;
     border-bottom-color: transparent;
     border-right-color: transparent;
}
 .count.step2:before {
     border-left-color: transparent;
     border-bottom-color: transparent;
}
 .count.step3:before {
     border-left-color: transparent;
}

<div class="count step1">
  <span>1</span>
</div>
<div class="count step2">
  <span>2</span>
</div>
<div class="count step3">
  <span>3</span>
</div>
<div class="count">
  <span>4</span>
</div>

Answer 2

您可以将进度条作为表单本身的伪元素，当然也可以作为单独的元素，使用圆锥和径向渐变来绘制圆。

例如，当您想显示在 totalSteps 的特定步骤中的时间时，可以使用以下方法绘制：

  background-image: radial-gradient(circle, white 0 50%, transparent 50% 100%), conic-gradient(gold 0 calc(360deg * var(--n) / var(--totalSteps)), transparent calc(360deg * var(--n) / var(--totalSteps)) 100%);

这样它会适用于任意数量的步骤。

简单示例：

form.progress::after {
  /* these variables would be set by JS - they are here just for demo */
  --totalSteps: 4;
  --step: 3;
  --stepString: '3';
  content: var(--stepString);
  width: 10vmin;
  height: 10vmin;
  background: white;
  border: 1px solid gold;
  border-radius: 50%;
  background-image: radial-gradient(circle, white 0 50%, transparent 50% 100%), conic-gradient(gold 0 calc(360deg * var(--step) / var(--totalSteps)), transparent calc(360deg * var(--step) / var(--totalSteps)) 360deg);
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

<form class="progress">
</form>

Answer 3

这是另一个使用边框的想法：

.step {
  width:70px;
  height:70px;
  border-radius:50%;
  border:2px solid red;
  display:inline-grid;
  place-items:center;
  font-size:30px;
  position:relative;
  z-index:0;
}
.step:before {
  content:attr(data-step);
}
.step:after {
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  border:14px solid;
  border-radius:50%;
  transform:rotate(45deg);
}
[data-step="1"]:after {border-color:red #0000 #0000 #0000}
[data-step="2"]:after {border-color:red red   #0000 #0000}
[data-step="3"]:after {border-color:red red   red   #0000}
[data-step="4"]:after {border-color:red red   red   red  }

<div class="step" data-step="1"></div>
<div class="step" data-step="2"></div>
<div class="step" data-step="3"></div>
<div class="step" data-step="4"></div>

4步表格的圆形进度条

circular progress bar for 4 steps of form

html

css

progress-bar

pure-css