It took awhile to come across a progress bar that was light and had rounded sections like I wanted. I created a progress bar that is mainly HTML and CSS except for updating the width using JavaScript. The concept is quite simple, we overlay however many squares we want with a background div for the progress meter. Lets take a look at the HTML markup for this.

<div class="Progressbar">
    <div class="ProgressbarMeter"></div>
    <div class="InnerDivs"></div>
    <div class="InnerDivs"></div>
    <div class="InnerDivs"></div>
    <div class="InnerDivs"></div>
    <div class="InnerDivs"></div>
</div>

Its really simple, we have a containing div that holds it all together and controls the main width for the progress bar. Inside Progressbar we have 6 divs total; 1 div is the progress meter bar and the other 5 are the div overlays for the squares.

Now for the CSS portion.

.Progressbar {
    background-color: #d7d7d7;
    width: 110px;
    margin-top: 1px;
    position: relative;
    height: 41px;
    border-radius: 3px;
}
.ProgressbarMeter {
    background-color: #669900;
    width: 40%; /*This controls the green progress bar.*/
    margin-top: 1px;
    height: 40px;
    border-radius: 3px;
    position: absolute;
}
.InnerDivs {
    border: 1px solid black;
    width: 20px;
    height: 40px;
    border-radius: 3px;
    float: left;
    position:relative;
}

The only item really to take note of within the CSS is the width under ProgressbarMeter. This controls the width of the progress bar.

Here is a quick image of what it looks like.

HTML CSS Progress Bar

JSFIDDLE Link to the above progress bar example: JsFiddle HTML CSS Progress Bar