英文:
SCSS Circular Progress Incidator Issue
问题
我正在尝试将4步CSS进度指示器添加一个额外的步骤，使其成为一个5步进度指示器。以下是现有的代码。如何修改代码以实现这一目标？
.myact__progress-indicator {
position: relative;
width: 34px;
height: 34px;
border-radius: 50%;
border: 2px solid $twe-grey-lightest;
}
.myact__progress-indicator-progress {
position: absolute;
width: 34px;
height: 34px;
border-radius: 17px;
clip: rect(0px, 34px, 34px, 17px);
margin: -2px;
&:before {
position: absolute;
display: block;
content: '';
width: 34px;
height: 34px;
background-color: $twe-green;
border-radius: 17px;
clip: rect(0px, 17px, 34px, 0px);
transform: rotate(0deg);
}
&:after {
position: absolute;
display: block;
content: '';
width: 34px;
height: 34px;
background-color: $twe-green;
border-radius: 17px;
clip: rect(17px, 34px, 34px, 17px);
transform: rotate(90deg);
}
&.p1 {
&:before {
transform: rotate(72deg);
}
}
&.p2 {
&:before {
transform: rotate(144deg);
}
}
&.p3 {
clip: rect(0px, 34px, 34px, 0px);
&:before {
transform: rotate(144deg);
}
&:after {
transform: rotate(90deg);
}
}
&.p4 {
clip: rect(0px, 34px, 34px, 0px);
&:before {
transform: rotate(216deg);
}
&:after {
transform: rotate(72deg);
}
}
&.p5 {
clip: rect(0px, 34px, 34px, 0px);
&:before {
clip: rect(0px, 34px, 34px, 0px);
transform: rotate(0deg);
}
&:after {
display: none;
}
}
}
HTML:
<div class="myact__progress-indicator">
<div class="myact__progress-indicator-progress p{{r.fields[6].value + 1}}"></div>
<div class="myact__progress-indicator-inner">
<span class="myact__progress-indicator-label">{{r.fields[6].value+1}}/5</span>
</div>
</div>
P1和P2按预期工作，但在P3时出现问题，我尝试创建一个示例，但无法复制，希望我漏掉了一些明显的东西。
英文:
I am trying to add an extra stage to a 4-step CSS progress indicator and make it a 5-step progress indicator. The existing code is shown below. How can I modify the code to achieve this?
.myact__progress-indicator {
position:relative;
width:34px;
height:34px;
border-radius:50%;
border:2px solid $twe-grey-lightest;
}
.myact__progress-indicator-progress {
position:absolute;
width:34px;
height:34px;
border-radius:17px;
clip:rect(0px, 34px, 34px, 17px);
margin:-2px;
&:before {
position:absolute;
display:block;
content:'';
width:34px;
height:34px;
background-color:$twe-green;
border-radius:17px;
clip:rect(0px, 17px, 34px, 0px);
transform:rotate(0deg);
}
&:after {
position:absolute;
display:block;
content:'';
width:34px;
height:34px;
background-color:$twe-green;
border-radius:17px;
clip:rect(17px, 34px, 34px, 17px);
transform:rotate(90deg);
}
&.p1 {
&:before {
transform:rotate(72deg);
}
}
&.p2 {
&:before {
transform:rotate(144deg);
}
}
&.p3 {
clip:rect(0px, 34px, 34px, 0px);
&:before {
transform:rotate(144deg);
}
&:after {
transform:rotate(90deg);
}
}
&.p4 {
clip:rect(0px, 34px, 34px, 0px);
&:before {
transform:rotate(216deg);
}
&:after {
transform:rotate(72deg);
}
}
&.p5 {
clip:rect(0px, 34px, 34px, 0px);
&:before {
clip:rect(0px, 34px, 34px, 0px);
transform:rotate(0deg);
}
&:after {
display:none;
}
}
}
HTML:
<div class="myact__progress-indicator">
<div class="myact__progress-indicator-progress p{{r.fields[6].value + 1}}"></div>
<div class="myact__progress-indicator-inner">
<span class="myact__progress-indicator-label">{{r.fields[6].value+1}}/5</span>
</div>
</div>
P1 and P2 are working as expected but it starts to fall over at P3, I tried to create a fiddle but I'm unable to replicate, I'm hoping I missed something glaringly obvious.
答案1
得分: 0
我只需要正确执行旋转操作，尽管从代码角度来看它的逻辑不像预期的那样工作，但渲染结果是符合预期的。
英文:
I just needed to do the rotations correctly, though it doesn’t work as logically expected from a code perspective it renders as expected.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论