表格的 4 个步骤的圆形进度条答案

【问题标题】：circular progress bar for 4 steps of form表格的 4 个步骤的圆形进度条
【发布时间】：2021-11-22 12:08:06
【问题描述】：

查找循环进度以指示用户已完成 4 步。

喜欢 4 种形式中的第一种， 4 种形式中的第 2 种形式， 4 种形式中的第 3 种形式， 4 种形式中的第 4 种形式

以下是预期的屏幕截图。

我得到了几个里面有两个 div 的例子。 CSS Progress Circle

在我只需要 4 个步骤的情况下，这很复杂。

【问题讨论】：

标签： html css progress-bar pure-css

【解决方案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>

【讨论】：

【解决方案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>

【讨论】：

【解决方案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>

【讨论】：