html - 带有 HTML 和 CSS 的进度条

Question

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

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

你能帮我创建这个进度条吗？

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>

Fiddle

(编辑:更改语法高亮；将后代更改为子选择器)