增量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>