如果过程完成，则在进度条中绘制刻度线 [英] Drawing a tick mark in the progressbar if the process is done

问题描述

我用 CSS & 创建了一个简单的进度条HTML.这里我使用了三个类 active、inactive &完成.

.container {宽度:600px；边距:100px 自动；}.progressbar li {列表样式类型:无；宽度:25%；向左飘浮;字体大小:12px；位置:相对；文本对齐:居中；颜色:#7d7d7d；}.progressbar li:before {宽度:30px；高度:30px；内容: "";行高:30px；边框:2px 实心 #7d7d7d;显示:块；文本对齐:居中；边距:0 自动 10px 自动；边界半径:50%；背景颜色:白色；}.progressbar li:after {宽度:100%；高度:2px；内容: '';位置:绝对；背景色:#7d7d7d；顶部:15px；左:-50%；z-索引:-1；}.progressbar li:first-child:after {内容:无；}.progressbar li.active {颜色:绿色；}.progressbar li.active:before {边框颜色:#55b776；背景颜色:#55b776；}.progressbar li.active+li:after {背景颜色:#55b776；}.progressbar li.done:before {边框颜色:#55b776；背景颜色:#55b776；}.progressbar li.done+li:after {背景颜色:#55b776；}.progressbar li.inactive:before {边框颜色:#7d7d7d；背景色:#7d7d7d；}.progressbar li.inactive+li:after {背景色:#7d7d7d；}

<ul class="progressbar"><li class="done"></li><li class="active"></li><li class="inactive"></li>

如果类处于活动状态，它将显示带有 background-color: green,
的圆圈如果该类处于非活动状态，它将显示带有 background-color: grey
的圆圈我想要的是在使用类 'done' 时，我需要用 background-color: green 显示圆圈，并像这样在绿色圆圈内显示刻度线.

我尝试了很多但无法完成.请有人帮助我.这是我的工作小提琴链接

解决方案

在 content: "✓";

中使用勾号

.container {宽度:600px；边距:100px 自动；}.progressbar li {列表样式类型:无；宽度:25%；向左飘浮;字体大小:12px；位置:相对；文本对齐:居中；颜色:#7d7d7d；}.progressbar li:before {宽度:30px；高度:30px；内容: "";行高:30px；边框:2px 实心 #7d7d7d;显示:块；文本对齐:居中；边距:0 自动 10px 自动；边界半径:50%；背景颜色:白色；}.progressbar li.done:before {内容:✓"；颜色:#ffffff；字体大小:20px；}.progressbar li:after {宽度:100%；高度:2px；内容: '';位置:绝对；背景色:#7d7d7d；顶部:15px；左:-50%；z-索引:-1；}.progressbar li:first-child:after {内容:无；}.progressbar li.active {颜色:绿色；}.progressbar li.active:before {边框颜色:#55b776；背景颜色:#55b776；}.progressbar li.active + li:after {背景颜色:#55b776；}.progressbar li.done:before {边框颜色:#55b776；背景色:#55b776；}.progressbar li.done + li:after {背景颜色:#55b776；}.progressbar li.inactive:before {边框颜色:#7d7d7d；背景色:#7d7d7d；}.progressbar li.inactive + li:after {背景颜色:#7d7d7d；}

<ul class="progressbar"><li class="done"></li><li class="active"></li><li class="inactive"></li>

根据您的要求使用 css

.container {宽度:600px；边距:100px 自动；}.progressbar li {列表样式类型:无；宽度:25%；向左飘浮;字体大小:12px；位置:相对；文本对齐:居中；颜色:#7d7d7d；}.progressbar li:before {宽度:30px；高度:30px；内容: "";行高:30px；边框:2px 实心 #7d7d7d;显示:块；文本对齐:居中；边距:0 自动 10px 自动；边界半径:50%；背景颜色:白色；}.progressbar li:after {宽度:100%；高度:2px；内容: '';位置:绝对；背景色:#7d7d7d；顶部:15px；左:-50%；z-索引:-1；}.progressbar li:first-child:after {内容:无；}.progressbar li.active {颜色:绿色；}.progressbar li.active:before {边框颜色:#55b776；背景颜色:#55b776；}.progressbar li.active + li:after {背景颜色:#55b776；}.progressbar li.done:before {边框颜色:#55b776；背景颜色:#55b776；}.progressbar li.done + li:after {背景颜色:#55b776；}.progressbar li.inactive:before {边框颜色:#7d7d7d；背景色:#7d7d7d；}.progressbar li.inactive + li:after {背景色:#7d7d7d；}.progressbar li.done {字体大小:16px；位置:相对；}.progressbar li.done:after {内容: " ";显示:块；宽度:0.3em；高度:0.6em；边框:纯白色；边框宽度:0 0.2em 0.2em 0；位置:绝对；左:4.2em；最高:26%；边距顶部:-0.2em；-webkit-transform:旋转(45度)；-moz-transform:旋转(45度)；-o-变换:旋转(45度)；变换:旋转(45度)；z-index:9;背景色:#55b776；}

<ul class="progressbar"><li class="done"></li><li class="active"></li><li class="inactive"></li>

I was created a simple progressbar with CSS & HTML. Here I used three classes active, inactive & done.

.container {
  width: 600px;
  margin: 100px auto;
}

.progressbar li {
  list-style-type: none;
  width: 25%;
  float: left;
  font-size: 12px;
  position: relative;
  text-align: center;
  color: #7d7d7d;
}

.progressbar li:before {
  width: 30px;
  height: 30px;
  content: "";
  line-height: 30px;
  border: 2px solid #7d7d7d;
  display: block;
  text-align: center;
  margin: 0 auto 10px auto;
  border-radius: 50%;
  background-color: white;
}

.progressbar li:after {
  width: 100%;
  height: 2px;
  content: '';
  position: absolute;
  background-color: #7d7d7d;
  top: 15px;
  left: -50%;
  z-index: -1;
}

.progressbar li:first-child:after {
  content: none;
}

.progressbar li.active {
  color: green;
}

.progressbar li.active:before {
  border-color: #55b776;
  background-color: #55b776;
}

.progressbar li.active+li:after {
  background-color: #55b776;
}

.progressbar li.done:before {
  border-color: #55b776;
  background-color: #55b776;
}

.progressbar li.done+li:after {
  background-color: #55b776;
}

.progressbar li.inactive:before {
  border-color: #7d7d7d;
  background-color: #7d7d7d;
}

.progressbar li.inactive+li:after {
  background-color: #7d7d7d;
}

<div class="container">
  <ul class="progressbar">
    <li class="done"></li>
    <li class="active"></li>
    <li class="inactive"></li>
  </ul>
</div>

If the class is active it will show the circle with background-color: green,
If the class is inactive it will show the circle with background-color: grey
What i want is while using class 'done' i need to show the circle with background-color: green and tick mark inside the green circle like this.

I tried a lot but not able to finish it. Please someone help me. Here is my working fiddle link

解决方案

Use tick mark in content: "✓";

.container {
      width: 600px;
      margin: 100px auto; 
  }
  .progressbar li {
      list-style-type: none;
      width: 25%;
      float: left;
      font-size: 12px;
      position: relative;
      text-align: center;
      color: #7d7d7d;
  }
  .progressbar li:before {
      width: 30px;
      height: 30px;
      content: "";
      line-height: 30px;
      border: 2px solid #7d7d7d;
      display: block;
      text-align: center;
      margin: 0 auto 10px auto;
      border-radius: 50%;
      background-color: white;
  }
  .progressbar li.done:before {
      content: "✓";
      color: #ffffff;
      font-size: 20px;
  }
  .progressbar li:after {
      width: 100%;
      height: 2px;
      content: '';
      position: absolute;
      background-color: #7d7d7d;
      top: 15px;
      left: -50%;
      z-index: -1;
  }
  .progressbar li:first-child:after {
      content: none;
  }
  .progressbar li.active {
      color: green;
  }
  .progressbar li.active:before {
      border-color: #55b776;
      background-color: #55b776;
  }
  .progressbar li.active + li:after {
      background-color: #55b776;
  }
  .progressbar li.done:before {
      border-color: #55b776;
      background-color: #55b776;
  }
  .progressbar li.done + li:after {
      background-color: #55b776;
  }
  .progressbar li.inactive:before {
      border-color: #7d7d7d;
      background-color: #7d7d7d;
  }
  .progressbar li.inactive + li:after {
      background-color: #7d7d7d;
  }

<div class="container">
  <ul class="progressbar">
      <li class="done"></li>
      <li class="active"></li>
      <li class="inactive"></li>
  </ul>
</div> 

As per your Requirements using css

.container {
      width: 600px;
      margin: 100px auto; 
  }
  .progressbar li {
      list-style-type: none;
      width: 25%;
      float: left;
      font-size: 12px;
      position: relative;
      text-align: center;
      color: #7d7d7d;
  }
  .progressbar li:before {
      width: 30px;
      height: 30px;
      content: "";
      line-height: 30px;
      border: 2px solid #7d7d7d;
      display: block;
      text-align: center;
      margin: 0 auto 10px auto;
      border-radius: 50%;
      background-color: white;
  }
  .progressbar li:after {
      width: 100%;
      height: 2px;
      content: '';
      position: absolute;
      background-color: #7d7d7d;
      top: 15px;
      left: -50%;
      z-index: -1;
  }
  .progressbar li:first-child:after {
      content: none;
  }
  .progressbar li.active {
      color: green;
  }
  .progressbar li.active:before {
      border-color: #55b776;
      background-color: #55b776;
  }
  .progressbar li.active + li:after {
      background-color: #55b776;
  }
  .progressbar li.done:before {
      border-color: #55b776;
      background-color: #55b776;
  }
  .progressbar li.done + li:after {
      background-color: #55b776;
  }
  .progressbar li.inactive:before {
      border-color: #7d7d7d;
      background-color: #7d7d7d;
  }
  .progressbar li.inactive + li:after {
      background-color: #7d7d7d;
  }
  
  .progressbar li.done {
    font-size: 16px;
    position: relative;
  }

  .progressbar li.done:after {
    content: " ";
    display: block;
    width: 0.3em;
    height: 0.6em;
    border: solid white;
    border-width: 0 0.2em 0.2em 0;
    position: absolute;
    left: 4.2em;
    top: 26%;
    margin-top: -0.2em;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    z-index:9;
    background-color: #55b776;
  }

<div class="container">
  <ul class="progressbar">
    <li class="done"></li>
    <li class="active"></li>
    <li class="inactive"></li>
  </ul>
</div>

这篇关于如果过程完成，则在进度条中绘制刻度线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！