增量Javascript/CSS條形圖

Question

我在尋找一個Javascript/CSS庫，它允許我創建條形圖（或進度條）以顯示最大值爲100的數據。有很多的這個工具，但沒有，我可以找到產生這種效果：

我想小廣場/藥丸，而不是一個普通的吧。部分問題是我不知道這種類型的圖表/進度條的名稱。有誰知道可以做到這一點的圖書館嗎？

Answer 1

爲什麼要使用庫？

body {background-color:#333;color:#ccc} 
 
#damage { 
 
    border-style: solid; 
 
    border-color: #ccc; 
 
    border-width: 2px 1px; 
 
    background-image: 
 
    linear-gradient(to right, #ccc 1px, transparent 1px, transparent 19px, #ccc 19px), 
 
    linear-gradient(to right, #9f9, #cfc 40%, transparent 40%); 
 
    /* 40% is the fullness of the bar */ 
 
    background-size: 20px, 100%; 
 
    width: 400px; 
 
    height: 10px; 
 
}

<div style="width: 400px"> 
 
    Damage 
 
    <div style="float: right">40%</div> 
 
    <div id="damage"></div> 
 
</div>