KOMPOOS.NL

progress bar

home » javascripts » progress-bar.html

voorbeeld van de progress bar

uitleg progress bar

Bij de progress bar is volop van aria gebruik gemaakt. Niet nodig om uit te leggen wat de procedure doet. Plaats de stylesheet in de head-sectie van de pagina, en de html-code en het javascript in de body-sectie van de pagina. Het javascript zo laag als mogelijk. De procedure valideert op "alle fronten". Niet in de laatste plaats op de strenge JSLint-norm.

html code voor het progress-bar gebeuren


<div id="progress-bar-positie">
        <div id="de_progress_bar">
                <div id="bar" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0"></div>
        </div>
        <div id="als_bar_klaar_is" aria-describedby="bar" aria-busy="true"><button> Klaar </button></div>
</div>

stylesheet van de progress bar


<style type="text/css">
        #progress-bar-positie{
                margin:20px 0 0 30px;
                height:60px}
        button{
                color:#ccc;
                background:#007;
                border:0;
                margin:8px 0 0 0}
        #de_progress_bar{
                background:#fb0;
                color:#fff;
                width:400px;
                line-height:20px;
                height:20px}
        #bar{
                position:absolute;
                text-align:center;
                color:#fff;
                background:#007;
                width:0}
        #als_bar_klaar_is[aria-busy="true"] button{display:none}
</style>

het javascript voor de progress bar


<script>
/*global document: false */
/*global window: false */
/*global setInterval: false */
function bar_in_progress() {
    var bar = document.getElementById("bar");
    var bar_is_ready = document.getElementById("als_bar_klaar_is");
    var progress_procent = parseFloat(bar.getAttribute("aria-valuenow"));
    if (progress_procent >= 100) {
        return;
    }
    progress_procent += 1;
    bar.setAttribute("aria-valuenow", progress_procent);
    bar.style.width = progress_procent * 4 + "px";
    bar.innerHTML = progress_procent + "%";
    if (progress_procent >= 100) {
        bar_is_ready.setAttribute("aria-busy", "false");
    }
}
window.onload = function () {
    setInterval(function () {
        bar_in_progress();
    }, 15);
};
</script>