Smalle progress-bar bovenaan het document

Hierboven zie je een heel smalle progress-bar. Dit subtiele effect wordt soms gebruikt om aan te geven dat de webserver of de browser bezig is. Voor deze site heb ik zo'n effect nagebouwd.
Op deze pagina wordt beschreven hoe je zoiets kunt maken voor je eigen site. De code kun je downloaden om zelf te gebruiken.

• Er worden twee items besproken:
  1. De werking van het script.
  2. Gebruiken in je eigen site.
   
• 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.
   
• 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 0. Die wordt door JavaScript in stapjes vergroot, waardoor het effect ontstaat.
• 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 vier variabelen gedeclareerd:
  •   barLength Dit is de actuele lengte van de progress-bar op het scherm. Bij het laden van de pagina staat deze op nul. Als barLength groter wordt dan barMaxLength, wordt barLength teruggezet op nul.
  •   barMaxLength Dit is de grootste lengte die de progress-bar kan krijgen. Als de pagina is geladen wordt barMaxLength ingesteld op window.innerWidth. Daar wordt 20 (px) van af getrokken vanwege een eventuele verticale schuifbalk.
  •   barTimer is een timer-variabele, die wordt gebruikt in combinatie met setInterval() en clearInterval().
  •   nSteps wordt gebruikt om het aantal malen te tellen dat de progress-bar is verlengd. 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 doet het volgende:
  • Allereerst wordt er een event-handler gemaakt die actief wordt als de afmetingen van het browser-window wordt veranderd. In dat geval wordt het document opnieuw geladen.
  • Daarna worden barMaxLength en barTimer ingesteld, waarbij de function extendBar() elke 50 ms wordt gestart. extendBar() krijgt de parameter 150 mee. Een en ander gaat met behulp van setInterval().
• De function extendBar()zorgt er voor dat bij elke aanroep de progress-bar wat langer wordt. In het voorbeeld is dat 15 px per keer.
• Het aantal keer dat extendBar() is aangeroepen wordt bijgehouden in de variabele nSteps.
  Zodra nSteps groter is dan maxSteps wordt clearInterval() aangeroepen, waardoor de herhaalde aanroep van extendBar() 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 de progress-bar. Maak die breedte niet groter dan 3 à 4 pixels, anders verdwijnt het subtiele van het effect.
• Regel de snelheid van de progress-bar. Dat gaat met twee variabelen: De herhaalfrequentie in setInterval() (hier: 50 en de verlenging van de progess-bar per stap hier: 15. Het is een kwestie van smaak hoe snel je de progress-bar wilt laten lopen. Maak de stapgrootte (15) 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 progress-bar 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;
  width: 0;
  background:navy;
  visibility:visible;
  transition: width 0.05s ease-out;
}
</style>
 
<script>
var barLength = 0, barMaxLength, barTimer, nSteps = 0;
window.addEventListener("load", function() {
  window.addEventListener("resize", function() {
    location.reload();
  })
  barMaxLength = window.innerWidth - 20;
  barTimer    = setInterval(extendBar,50,150);
})
 
function extendBar(maxSteps) {
  if (barLength >= barMaxLength) barLength = 0;
  barLength += 15;
  document.getElementById('Bar').style.width = barLength + "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"></div>

Downloaden:
 
Druk op de knop:  File: voor601.zip, 622 bytes.

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