HTML & CSS Gauge

A textual gauge using the html bock char

by ovillani

HTML

<div>
<span id="fxdone1" class="fxbatgauge-done">&block;&block;&block;</span><span id="fxtodo1" class="fxbatgauge-todo">&block;&block;&block;&block;&block;&block;</span>
</div>
<br/>
<div>
<span id="fxdone1" class="fxbatgauge-done">&block;&block;&block;&block;</span><span id="fxtodo1" class="fxbatgauge-todo">&block;&block;&block;&block;&block;</span>
</div>
<br/>
<div>
<span id="fxdone1" class="fxbatgauge-done">&block;&block;&block;&block;&block;</span><span id="fxtodo1" class="fxbatgauge-todo">&block;&block;&block;&block;</span>
</div>
<br/>
<div>
<span id="fxdone1" class="fxbatgauge-done">&block;&block;&block;&block;&block;&block;</span><span id="fxtodo1" class="fxbatgauge-todo">&block;&block;&block;</span>
</div>
<br/>

CSS

.fxbatgauge-done {
  letter-spacing: 2px;
  color: #32CD32;
  padding-right: 1px;
}

.fxbatgauge-todo {
  letter-spacing: 2px;
  color: #D3D3D3; /* whitesmoke; */
}