1

查找循环进度以指示用户在 4 中的哪一步。

比如 4 中的第 1 种形式、4 种中的第 2 种形式、4 种中的第 3 种形式、4 种中的第 4 种形式

以下是预期内容的屏幕截图。

在此处输入图像描述

我得到了几个里面有两个 div 的例子。CSS 进度圈

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

4

3 回答 3

0

这是我的解决方案，它只使用了边框和 sudobefore元素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>

于 2021-09-30T16:27:05.507 回答
0

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

例如，当您想显示在​​ 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>

于 2021-09-30T17:58:48.183 回答
0

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

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

于 2021-09-30T20:04:40.343 回答