如何在 CSS 中显示过度完成（超过 100%）的进度条？

Question

我想显示一个进度条，以不同的颜色显示超过100％的百分比，以表明已经超额完成。如何在HTML/CSS中实现这一点？

以下代码可用于显示最多达到100％的百分比进度条：

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

#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;
}

谢谢！

- perpetual_dream

---

这个网站可以给你提供一个想法：http://yensdesign.com/2008/11/how-to-create-a-stylish-loading-bar-as-gmail-in-javascript/。 - user1372430

Answer 1

http://jsfiddle.net/qTmGE/1/

请原谅我使用jQuery。

- Markus Unterwaditzer

Answer 2

纯CSS进度条 -- FIDDLE

- Man Programmer

---

使用非标准化的Webkit属性。我不认为这是可取的。 - Markus Unterwaditzer

请仔细阅读问题，@perpetual_dream想要CSS进度条。 - Man Programmer

我的代码与你的一样纯粹使用CSS（JavaScript只是一个帮助函数，使值更容易改变），没有必要对此嘲讽。 - Markus Unterwaditzer