带有 HTML 和 CSS 的进度条

Question

我想创建一个如下图所示的进度条：

我不知道要创建这个。我应该使用 HTML5 技术吗？

你能帮我一些关于创建这个进度条的帮助吗？

原文由 Shahin 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

 #progressbar {
  background-color: black;
  border-radius: 13px;
  /* (height of inner div) / 2 + padding */
  padding: 3px;
}

#progressbar>div {
  background-color: orange;
  width: 40%;
  /* Adjust with JavaScript */
  height: 20px;
  border-radius: 10px;
}

 <div id="progressbar">
  <div></div>
</div>

小提琴

（编辑：更改语法突出显示；将后代更改为子选择器）

原文由 RoToRa 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

http://jsfiddle.net/cwZSW/1406/

 #progress {
    background: #333;
    border-radius: 13px;
    height: 20px;
    width: 300px;
    padding: 3px;
}

#progress:after {
    content: '';
    display: block;
    background: orange;
    width: 50%;
    height: 100%;
    border-radius: 9px;
}

 <div id="progress"></div>

原文由 Madara‘s Ghost 发布，翻译遵循 CC BY-SA 3.0 许可协议