Heen en weer gaande voortgangsindicator
Bovenaan deze pagina zie je een voortgangsindicator, een balk die heen en weer gaat. Dit subtiele effect wordt soms
gebruikt om aan te geven dat de webserver of de browser bezig is. Na enige tijd stopt het effect. Voor deze site heb ik zo'n
effect nagebouwd.
Op deze bladzijde wordt beschreven hoe je zoiets maakt voor je eigen website. De code kun je downloaden om zelf te gebruiken.
- Er worden twee items besproken:
- De werking van het script.
- Toepassen in je eigen site./li>
- Deze indicator is geschikt als je niet weet hoeveel processtappen of rekenstappen er nodig zijn, of hoe lang een proces
gaat duren.
- De werking van het script
- De code van het voorbeeld is gemaakt met HTML, CSS en JavaScript.
- HTML
- De HTML bestaat uit één enkele div-tag met id="Bar". Deze tag mag geen content bevatten.
- De breedte van Bar is ingesteld op 150px via een style-attribuut. Omdat de breedte wordt gebruikt in de
Javascript berekeningen, moet dit op deze manier worden geregeld. Als je de breedte in de CSS zou zetten werkt het niet. De
reden daarvoor is niet duidelijk.
- CSS
- De balk is links bovenaan de pagina gepositioneerd, dus op top: 0 en left: 0. De position is fixed zodat de bar zichtbaar blijft als de gebruiker gaat scrollen.
- De hoogte is 1px. Dat is weinig, maar het zorgt voor het subtiele effect.
- De breedte is niet ingesteld binnen de style-tag, maar met een inline style-attribuut.
- De (achtergrond-)kleur van de balk is navy.
- Door visibility: visible op te geven is het mogelijk de balk te laten verdwijnen met behulp van JavaScript.
- Om te voorkomen dat het effect er schokkerig gaat uitzien is een transition
toegevoegd. Deze maakt de beweging wat soepeler.
- JavaScript
- De progress-bar wordt bestuurd door het JavaScript. Als eerste worden er zes variabelen gedeclareerd:
• barLength Dit is de lengte van het balkje op het scherm. Bij het laden van de pagina wordt deze via een inline style-attribuut (in het voorbeeld) ingesteld op 150px.
• barMaxLeft Hierin wordt bewaard hoever het balkje naar rechts mag verschuiven (t.o.v de linkerkant van het document). Deze waarde wordt bepaald bij de initialisatie van de voortgangsindicator, zodra de pagina is geladen.
- • barTimer is een timer-variabele, die wordt gebruikt in combinatie met setInterval() en clearInterval().
- • sizeSteps is het aantal pixels dat het balkje in elke stap wordt verschoven. In dit vooreeld: 50.
- • maxSteps is het aantal keren (stappen) dat het balkje wordt verschoven. In het voorbeeld: 50.
- • nSteps; wordt gebruikt om het aantal malen te tellen dat het balkje is verschoven. Bij het laden van
de pagina staat nSteps op nul.
- Na de variabelen wordt er een event-handler gemaakt die actief wordt als de pagina is geladen. Dit gebeurt met addEventListener(). Deze function stelt barMaxLeft en barTimer in, waarbij de function moveBar() elke 150 ms wordt gestart. Dit gaat met behulp van setInterval().
- De function moveBar()zorgt er voor dat het balkje bij elke aanroep wordt verschoven. In het voorbeeld is dat 50px per keer.
- Als de linkerkant van het balkje (in barLeft) de waarde van barMaxLeft heeft bereikt of er overheen is gegaan, wordt de bewegingsrichting omgedraaid door het teken van sizeSteps te veranderen. Dit gebeurt ook als de linkerkant van het balkje aan de linkerkant uit het document dreigt te schuiven (barLeft is dan kleiner dan nul).
- Het aantal keer dat moveBar() is aangeroepen wordt bijgehouden in de variabele nSteps.
Zodra nSteps groter is dan maxSteps wordt clearInterval() aangeroepen, waardoor de herhaalde aanroep van moveBar() wordt beëindigd. - Tenslotte wordt de (gestopte) progress-bar onzichtbaar gemaakt door visibilty op hidden te zetten.
- Gebruiken in je eigen site
- Download de .zip-file en pak hem uit. Zet de code in je eigen HTML-bestand zoals hieronder wordt getoond.
- Pas de CSS aan aan je eigen wensen voor wat betreft kleur, breedte (= height) van het balkje. Maak die breedte niet groter dan 3 à 4 pixels, anders verdwijnt het subtiele van het effect.
- Regel de snelheid van het balkje. Dat gaat met de herhaalfrequentie in setInterval() (hier: 150 ms). Het
is een kwestie van smaak hoe snel je het balkje wilt laten lopen. Maak de stapgrootte (50) niet te groot, anders wordt de
beweging schokkerig. Dat laatste is weer op te vangen door de duur van de transition in de CSS te veranderen.
- Tenslotte: In de praktijk zul je aan het JavaScript moeten knutselen om andere events af te vangen, bijvoorbeeld als het opzoeken van gegevens uit een database klaar is. Een dergelijk event kun je gebruiken om de voortgangsindicator te laten stoppen. Merk op dat de constructie met nSteps en maxSteps meestal kan vervallen.
Gebruik:
- De code staat gedeeltelijk in de <HEAD> en gedeeltelijk in de <BODY>.
De code van het voorbeeld ziet er als volgt uit:
(Zet dit in de <HEAD>).
<style>
#Bar {
position: fixed;
top: 0;
left: 0;
height: 1px;
background:navy;
visibility:visible;
transition: all 0.5s ease;
}
</style>
<script>
var barLeft = 0, barMaxLeft, barTimer, sizeSteps = 50, maxSteps = 150, nSteps = 0;
window.addEventListener("load", function() {
barMaxLeft = window.innerWidth - parseInt(document.getElementById('Bar').style.width,10);
barTimer = setInterval(moveBar,150);
})
function moveBar() {
if (barLeft >= barMaxLeft || barLeft < 0) sizeSteps *= -1;
barLeft += sizeSteps;
document.getElementById('Bar').style.left = barLeft + "px";
nSteps += 1;
if (nSteps > maxSteps) {
clearInterval(barTimer);
document.getElementById('Bar').style.visibility = "hidden";
}
}
</script>
(Zet dit ergens in de <BODY>, bijvoorbeeld direct na de <body>-tag).
<div id="Bar" style="width:150px"></div>
Downloaden:
Druk op de knop:
File: voorb470.zip, 632 bytes.
Opmerking:
Varianten van dit script zijn te vinden in de items Smalle progress-bar
bovenaan het document en Smalle snake bovenaan het document.
