Loading bar with transition

by David Joseph Guzsik

HTML

<div class=progress>
    <div class=fill></div>
</div>
<p>Uploading... <span id="perc"></span></p>

CSS

.progress {
    height: 30px;
    width: 96%;
    margin: 2%;
    box-sizing: border-box;
    background-color: #eee;
    border: 1px solid #888;
    box-shadow: inset 1px 1px 3px rgba(0,0,0,.3);
    border-radius: 6px;
    overflow: hidden;
}
.fill {
    height: 100%;
    background-color: #09f;
    width: 0;
    
    transition: background-color 1s ease, width .3s ease;
}
p {
    font-family: sans-serif;
    text-align: center;
    font-size: 1.2em;
}

JavaScript

$(function(){
    var $fill = $('.fill'),
        $perc = $('#perc'),
        $msg = $perc.parent(),
        w = 0,
        f = function(){
            if (Math.random() > .99){
                $fill.css('background-color','#aaa');
                $msg.text('Upload failed :C');
                return;
            }
            w=parseInt(w+=Math.random()*5);
            if (w >= 100){
                w = 100;
                $fill.css('background-color','#0d0');
                $msg.text('Upload successful!');
            }
            else setTimeout(f, 100+Math.random()*200);
            $fill.css('width', $perc.text(w+'%').text());
        };
    f();
});