KOMPOOS.NL

progress tag - HTML5

home » manuals » html5 » progress.html

sitemap | terug naar het html5 referentie - tags - overzicht

voorbeeld progress tag

uitleg progress gebeuren

Op moment van schrijven is het nog niet erg handig om de progress-tag "voluit" bij elke gelegenheid te gebruiken. Hierboven is niet veel méér gebeurd dan (een "magere" actie..) 66% op het scherm te zetten (check dit voorbeeld maar eens met een recente opera-browser). Tot het moment dat er een goede toepassing voor "progress" voorhanden is, zal ik de vervangende (cross browser) html(4) procedure op deze pagina plaatsen.

vervangende progress procedure (voorbeeld)

html code voor de vervangende progress-code

<div id="progress_bar">
    <div id="progress_indicator"></div>
</div>
<div id="progress_">0</div>

stylesheet voor de vervangende progress-code

<style>
        #progress_bar{
                width:250px;
                border:1px solid #808080}
        #progress_indicator{
                width:0px;
                background-image:url("progress.png");
                height:20px;
                margin:0}
        #progress_{
                text-align:center;
                width:250px}
</style>

javascript voor het progress proces

<script>
var max_progress = 250;
var huidige_progress = 0;
var _interval = 0;
function show_progress() {
    if (huidige_progress >= max_progress) {
        clearInterval(_interval);
        return;
    }
    var progress_ = document.getElementById("progress_");
    var progress_indicator = document.getElementById("progress_indicator");
    huidige_progress += 1;
    progress_indicator.style.width = huidige_progress+'px';
    progress_.innerHTML = huidige_progress;
    if (huidige_progress === max_progress) {clearInterval(_interval);}
}
function start() {
    _interval = setInterval(function(){show_progress()},10);
}
window.onload = start;
</script>

Voor ik het vergeet is hier nog de progress.png die in het script gebruikt wordt.