CSS based progress bar

HTML

<div class="root">
    <div class="progress_bar">
        <div class="progress"></div>
    </div>
</div>

CSS

.root {
    width: 800px;
    height: 800px;
}
.progress_bar {
    width: 225px;
    height: 20px;
    border: 1px solid #666666;
}
.progress {
    width: 30%;
    height: 100%;
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #C3D5EB), color-stop(1, #60A5DE));
    background-image: -o-linear-gradient(bottom, #C3D5EB 0%, #60A5DE 100%);
    background-image: -moz-linear-gradient(bottom, #C3D5EB 0%, #60A5DE 100%);
    background-image: -webkit-linear-gradient(bottom, #C3D5EB 0%, #60A5DE 100%);
    background-image: -ms-linear-gradient(bottom, #C3D5EB 0%, #60A5DE 100%);
    background-image: linear-gradient(to bottom, #C3D5EB 0%, #60A5DE 100%);
}

JavaScript

//http://www.css3factory.com/linear-gradients/