CSS only progress bar

12 September 2011

Exploring all the new CSS3 posibilities I discovered browser-rendered gradients that can be used as backgrounds. But since this is a tricky syntax and different in all browsers I wanted to find out the what my options are. This lead to the creation of this progress bar.

Firefox and chrome only!



The HTML needed for the progress bar:

<div class="fancyProgressBar">
    <span>
        <div class="progressDone" style="width: 45%;">45%</div>
    </span>
</div>

And the CSS declarations:

.fancyProgressBar {
    padding: 6px 0px;
    width: 398px;
    background-image:-moz-linear-gradient(0deg,transparent 40px, #666 1px);
    background-image:-webkit-gradient(linear, 0 0, 50% 0, color-stop(0, #666), color-stop(0.07, rgba(255, 255, 255, 0)), color-stop(1, rgba(255, 255, 255, 0)));
    background-size: 40px 10px;
    background-position: -1px 0px;
    position: relative;
}
.fancyProgressBar:after{
    content: "Percentage completed this year";     /* this is the progressbar label */
    position: absolute;
    top: 110%;
    width: 100%;
    text-align: center;
    font-size: 11px;
    color: #999;
}
.fancyProgressBar span {
    display: block;
    background-color: #EEEEEE;
    border: 1px solid #666;  
    border-radius: 300px;
    overflow: hidden;
    box-shadow: inset 0 0 4px rgba(0,0,0,.3);
    background-image:-moz-linear-gradient(0deg,transparent 40px, #666 1px);
    background-image:-webkit-gradient(linear, 0 0, 50% 0, color-stop(0, #666), color-stop(0.07, rgba(255, 255, 255, 0)), color-stop(1, rgba(255, 255, 255, 0)));
    background-size: 40px 10px;
    background-position: -2px 0px;
}
.progressDone {
    background-image: -moz-linear-gradient(90deg,rgba(0,120,0,.9), rgba(0,200,0,.6));
    background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,120,0,.9)), to(rgba(0,200,0,.6)));
    height: 100%;
    text-align: right;
    text-indent: 20px;
    color: #FFFFFF;
    box-shadow: 1px 0px 0px #888;
}
.progressDone:after {
    content: "000a0";
}
/* change both to set the height of the progress bar and keep the text aligned in the middle */
.fancyProgressBar span,
.progressDone {
    height:      25px;
    line-height: 25px;
}
You must have JavaScript enabled to use this form!

Leave a comment!

  1. Your mail is safe with me. It's only only used to display your Gravatar image!

0 comments

Please feel free to be the first to comment on this page!

By placing a comment you let me know i'm doing a good job. It doesn't have to be constructive, just a "awesome!" makes me really happy! You contribute to a better world!