Kleurrijke progress-bar

Hieronder zie je een progress-bar. Als je op de knop tikt of klikt, wordt die inactief. De progress-bar gaat lopen totdat de balk vol is.
Vernieuw de pagina als je het effect nog een keer wilt laten werken.

Laat de progress-bar werken

Op deze pagina wordt uitgelegd hoe je zoiets maakt. 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.
   
• Het kleurrijke van deze progress-bar zit in de kleuren van de regenboog die, naarmate de balk langer wordt, steeds beter zichtbaar worden.
   
• De werking van het script
• Een klik of tik op de knop start een JavaScript-function die elke 10 ms de breedte van de balk één pixel breder maakt. Dit stopt als de progress-bar even breed is als de grijze achtergrond.
• De code van het voorbeeld bestaat uit HTML, CSS en JavaScript.
   
• HTML
• De HTML bestaat uit twee geneste <div>-tags, met de id's progress-container en progress-bar. Deze dienen voor de opmaak met CSS en voor de communicatie met JavaScript.
• Er is ook een <button>-tag waarmee het effect wordt getoond. Deze knop start, via onclick, een proces dat lijkt op een langdurige berekening. In een productie-versie zul je dat niet gebruiken, maar wordt de lengte van de progress-bar bepaald door het rekenproces.
   
• CSS
• Het id progress-container maakt de buitenste <div>-tag op en positioneert die gecentreerd in de regel. Dit is de grijze balk waar de progress-bar in loopt.
  De breedte is 80% van de breedte van het document. De dikte van de balk (height) is 30px. De uiteinden zijn afgerond door de border-radius op 15px te zetten.
  Om te voorkomen dat de progress-bar (een beetje) buiten de balk loopt, is overflow:hidden toegevoegd.
• id progress-bar maakt de binnenste <div>-tag op en positioneert die in de grijze balk.
  Er wordt een vierkant gemaakt van 30px × 30px, met een afrondingsstraal van 15px, waardoor een cirkel ontstaat. Bij elke "rekenstap" wordt de cirkel door JavaScript één pixel breder gemaakt.
  De regenboog wordt gemaakt door een (horizontaal) lineair verloop in de kleuren van de regenboog: rood, oranje, geel, groen, blauw, indigo en violet.
   
• De knop wordt opgemaakt met een style-attribuut.
   
• JavaScript
• De function startProgress() wordt geactiveerd door een klik of tik op de knop, via onclick. Deze function slaat verwijzingen naar progress-container en progress-bar op in de variabelen xxx resp. yyy.
• De breedte van progress-container (de grijze balk) wordt in balkBreedte gezet. Dit wordt gemeten in pixels, zonder de eenheid px. Die is voor elke breedte van het document anders. Dat gaat met clientWidth.
• De breedte van progress-bar (de gekleurde cirkel) wordt in balkBreedteNu gezet. Ook dat gaat met clientWidth. In het voorbeeld wordt balkBreedteNu gelijk aan 30.
• Daarna wordt de knop uitgeschakeld. Dat gebeurt door disabled = true in te stellen.
• Tenslotte wordt setInterval() aangeroepen. Die voert elke 10 ms de function progressStap() uit.
   
• De function progressStap() kijkt eerst of balkBreedteNu niet groter is dan balkBreedte. Als dat zo is wordt de de breedte van progress-bar bijgewerkt naar balkBreedteNu en wordt balkBreedteNu met één (pixel) verhoogd.
• Als balkBreedteNu groter is dan balkBreedte wordt clearInterval uitgevoerd, waardoor progressStap() niet meer wordt uitgevoerd en progress-bar dus niet meer groeit.
   
• Toepassen je eigen site
• Download de .zip-file en pak hem uit. Bouw de code op zoals hieronder aangegeven. Je hebt nu het voorbeeld van deze pagina.
• Verander de breedte en de hoogte van de progress-bar naar je eigen smaak en behoefte. De border-radius moet gelijk zijn aan de halve hoogte van de balk. Verander eventueel ook de achtergrondkleur van de balk en het kleuren-palet in background-image.
• Verwijder setInterval uit startProgress() en clearInterval uit progressStap(). Voor dat laatste verwijder je het hele blok else { … }.
• Roep progressStap() aan vanuit het rekenproces. Als dat bijvoorbeeld 22% gevorderd is, stel je balkBreedteNu in op 22% van de balkBreedte. Voeg eventueel een transition met ease toe aan de id progress-bar voor width.

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>
#progress-container {
  margin:0 auto;
  width:80%; height:30px;
  border-radius:15px;
  background-color:#ddd;
  overflow:hidden;
}
#progress-bar {
  width:30px; height:30px;
  border-radius:15px;
  background-image:linear-gradient(90deg, red, orange, yellow, green,
      blue, indigo, violet);
}
</style>

<script>
let progressStappen, balkBreedteNu, stapGrootte, balkBreedte, yyy;
function startProces() {
  let xxx = document.getElementById('progress-container');
  yyy  = document.getElementById('progress-bar');
  balkBreedte = xxx.clientWidth;
  balkBreedteNu = yyy.clientWidth;
  document.getElementById('barKnop').disabled = true;
  progressStappen = setInterval(procesStap,10);
}
function procesStap() {
  if (balkBreedteNu <= balkBreedte) {
    yyy.style.width = balkBreedteNu +"px";
    balkBreedteNu++;
  } else {
    clearInterval(progressStappen);
  }
}
</script>

(Zet dit in de <BODY> op de plaats waar de progress-bar moet verschijnen.)

<div id="progress-container">
  <div id="progress-bar"></div>
</div>
<p style="text-align:center">
  <button type="button"
      style="color:navy;font-weight:bold;font-size:110%" id="barKnop"
      onclick="startProces()">Laat
  de progress-bar werken</button>
</p>

Downloaden:
 
Druk op de knop:  File: voorb785.zip, 762 bytes.