site loading bar

by paulftw

HTML

<div class="loadbar">
    <div class="loadbar-inner"></div>
</div>

foo text<br/>
asd<br/>
some thext
<button>go</button>
<hr/>
moar
<button>load</button>

CSS

.loadbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background-color: #333;
    z-index: 1000;
}
.loadbar-inner {
    height: 100%;
    background-color: rgb(82,121,167);
    width: 0%;
    -webkit-transition: all 0.1s ease-in-out;
}

JavaScript

var xx = 0;
window.setInterval(function() {
    xx += 30*Math.random();
    $('.loadbar').toggle(xx <= 100);
    $('.loadbar-inner').css('width', '' + xx + '%');
    if (xx > 400) {
        xx = 0;
    }
}, 300);