CODEWITHSUNDEEP
javascripthtmlcsschartsprogress-bar
user3478799
user3478799

Reputation: 55

Incremental Javascript / CSS bar chart

I am looking for a Javascript / CSS library that will allow me to create bar charts (or progress bars) for displaying data with a max value of one hundred. There are plenty of tools for this, but none that I can find producing this effect:

enter image description here

I want the little squares / pills rather than a plain bar. Part of the problem is that I do not know the name of this type of chart / progress bar. Does anyone know of a library that can do this?

Upvotes: 0

Views: 162

Answers (1)

Niet the Dark Absol
Niet the Dark Absol

Reputation: 324620

Why use a library?

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>

Upvotes: 3

Related Questions