I have been experimenting with creating my own custom progress bar using CSS.
While the HTML5
<progress value="10" max="100"></progress>In my CSS code, I have defined the .progressbar class to be 10px wide and 10px high (although I should consider renaming it to .progressPiece in the future).
.progressbar>div {
margin:0;
padding:0;
height:10px;
width:10px;
}
I have also created different classes for each section of the progress bar, specifying which image to use:
.start>div {
background: url("/images/images/pbStart.gif") right center no-repeat;
}
.startGlow>div {
background: url("/images/images/pbStartGlow.gif") right center no-repeat;
}
.chunk>div {
background: url("/images/images/pbChunk.gif") right center no-repeat;
}
.motion>div {
background: url("/images/images/pbMotion.gif") right center no-repeat;
}
.end>div {
background: url("/images/images/pbEnd.gif") right center no-repeat;
}
.endGlow>div {
background: url("/images/images/pbEndGlow.gif") right center no-repeat;
}
Based on examples I've seen, I anticipated the following code snippets would work:
<div class="progressbar startGlow"></div>
<div class="progressbar chunk"></div>
<div class="progressbar chunk"></div>
<div class="progressbar chunk"></div>
<div class="progressbar end"></div>
However, the output is not what I expected.
Instead of the desired progress bar, all I see are empty boxes. You can view the issue in this jsFiddle link.
What am I doing wrong?
UPDATE: Even though I resolved the initial problem, I am now working on refining this progress bar by using smaller jpeg images.