Smalle snake bovenaan het document

Bovenaan deze pagina zie je een voortgangsindicator, een balkje dat van links naar rechts schuift gaat. Als de rechterkant van het document is bereikt, begint het weer aan de linkerkant. Dit wordt ook wel &quout;snake" genoemd. Het 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:
  1. De werking van het script.
  2. 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.
   
• JavaScript
• De snake-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: 25.
  •   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 moveSnake() elke 100 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 25px per keer.
• Als de linkerkant van het balkje (in barLeft) de waarde van barMaxLeft heeft bereikt of er overheen is gegaan, wordt barLeft op nul gezet, waardoor het balkje naar links springt.
• Het aantal keer dat moveSnake() is aangeroepen wordt bijgehouden in de variabele nSteps.
  Zodra nSteps groter is dan maxSteps wordt clearInterval() aangeroepen, waardoor de herhaalde aanroep van moveSnake() 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: 100 ms). Het is een kwestie van smaak hoe snel je het balkje wilt laten lopen. Bij de gebruikte waarde van 100 ms loopt de snake redelijk soepel, maar als je een andere waarde kiest wordt de beweging al gauw heel schokkerig. Maak de stapgrootte (25) niet te groot, want ook dat kan de beweging schokkerig maken.
  Overigens zie je dit effect op internet ook vaak schokkerig verlopen, ook bij zeer professionele sites.
   
• 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;
}
</style>
<script>
var barLeft = 0, barMaxLeft, barTimer, sizeSteps = 25, maxSteps = 50, nSteps = 0;
window.addEventListener("load", function() {
  barMaxLeft = window.innerWidth - parseInt(document.getElementById('Bar').style.width,10);
  barTimer   = setInterval(moveSnake,100);
});
function moveSnake() {
  if (barLeft >= barMaxLeft) barLeft = 0;
  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: voorb722.zip, 604 bytes.

Opmerking:
 
Varianten van dit script zijn te vinden in de items Smalle progress-bar bovenaan het document en Heen en weer gaande voortgangsindicator.