Laadpuntjes II

Moeten wachten op je PC omdat die bezig is met een download of iets anders wat lang duurt, is niet prettig. Het is dan fijn als er toch iets op het scherm gebeurt dat de voortgang van de actie aangeeft. Laadpuntjes zijn hier een goed middel voor.
Hieronder zie je een mogelijke uitvoering.

Inspiratie voor het onderwerp van deze pagina is ontstaan door het programma MyDrive Connect, dat op mijn PC draait voor het beheer van mijn navigatiesysteem van TomTom. Daarin zijn laadpuntjes te zien. Iets wat er op lijkt heb ik nagebouwd in HTML, CSS en JavaScript.

De code kun je downloaden om zelf te gebruiken en/of om zelf aan door te ontwikkelen.

• Er worden twee items besproken:
  1. De werking van het script.
  2. Inbouwen in je eigen site.
   
• De werking van het script
• De code van het voorbeeld bestaat uit HTML, CSS en JavaScript. Om het te gebruiken moet je wijzigen aan alle drie de code-onderdelen.
   
• HTML
• De HTML bestaat uit een enkele <ul>-tag met de klasse puntjes.
• De puntjes zelf zijn de <li<-tags. Ze hebben de id's P1, P2, P3, enz. De nummering begint bij 1 en mag geen gaten bevatten.
   
• CSS
• De CSS voor de laadpuntjes bestaat uit 3 blokken:
  •   De klasse puntjes. Hier wordt alleen aangegeven dat de bullets van de list-items moeten worden weggelaten.
  •   De list-items binnen de klasse puntjes. Hier worden de puntjes in de 'ruststand' opgemaakt, zie hier onder.
  •   De id's P1, P2, P3, enz. Hier wordt alleen de border-color gelijk gemaakt aan de achtergrondkleur.
  N.B.: Er is hier gekozen voor id in plaats van class, omdat een id vanuit JavaScript gemakkelijker te refereren is dan een class.
• De grootte van de puntjes is 10px (hoogte en breedte) met een afrondingsstraal van 50%. Ze zijn dus rond.
• De puntjes staan achter elkaar (display:inline-block). De ruimte tussen de puntjes is ingesteld met margin. In dit geval is de marge links en rechts 5px, zodat de puntjes elk 10px uit elkaar staan. Let wel: de rand is hier 6px breed, zodat de puntjes (als ze 'klein' zijn) effectief 22 px uit elkaar staan. Het is een kwestie van een beetje spelen om de onderlinge afstand naar je eigen smaak in te stellen.
• De kleur van de rand is gelijk aan de kleur van de achtergrond (#e4e9f6), zodat de rand in 'ruststand' niet zichtbaar is.
• De puntjes worden 'groot' doordat JavaScript de border-color verandert. Dat gaat met een transition die hier is gedefinieerd.
   
• JavaScript
• In het voorbeeld wordt het effect gestart als de pagina is geladen: window.onload = doeHet;. Deze function start elke 1.5 seconde de function verzetPuntje() op.
• verzetPuntje() gebruikt twee globale variabelen, nl. aantal en wijzer.
• aantal is het aantal puntjes wat op het scherm staat. wijzer fungeert als pointer naar het puntje dat 'groot' moet worden.
• Bij elke aanroep van verzetPuntje() wordt wijzer verhoogd. Als wijzer groter wordt dan aantal, wordt wijzer teruggezet naar 1.
• De rand van het puntje dat 'kleiner' moet worden, wordt zwart gemaakt.
• De rand van het puntje dat 'kleiner' moet worden krijgt de achtergrondkleur weer terug.
• Beide kleurveranderingen gaan met de transition die in de CSS is gedefinieerd.
   
• Tenslotte:
• Dit is typisch iets voor langdurige rekenbewerkingen. Hier is setInterval() gebruikt om verzetPuntje() aan te roepen (lees: de puntjes te verzetten), maar de aangewezen manier is om na elke 10, 100, 1000 bewerkingen verzetPuntje() aan te roepen.
  Als je toch setInterval() of setTimeOut() gebruikt, vergeet dan niet om ze weer uit te zetten.
   
• Inbouwen in je eigen site
• Download de .zip-file en pak hem uit. Bouw de code op zoals op deze pagina is beschreven.
• Pas de kleuren aan aan je eigen wensen. Het gaat hier om de om de background-color in de selector puntjes li (hier: #000, dat is zwart) en de border-color in de selectors puntjes li en #p1, #P2, #P3, #P4 (hier: ##e4e9f6, dat is de achtergrondkleur van deze pagina). Aanbevolen wordt om deze twee aan elkaar gelijk te houden, anders gaat het effect ten dele verloren.
• Voer de wijzigingen aan de kleuren ook door in het JavaScript.
• Voeg puntjes toe:
  •   Zet de variabele aantal op het gewenste aantal puntjes.
  •   Zorg dat er voor elk puntje een <li>-tag is met het juiste id. Er mogen geen gaten in de nummering zitten. Het eerste puntje heeft id="P1".
  •   Voeg de nieuwe id's toe in de CSS.
• Verwijder puntjes:
  Dit gaat op dezelfde manier als het toevoegen van puntjes. Je voegt echter geen dingen toe maar je verwijdert ze juist.

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>
.puntjes {
  list-style-type:none;
}
.puntjes li {
  display:inline-block;
  width:10px;
  height:10px;
  border: 6px solid #e4e9f6;
  border-radius:50%;
  background-color: #000;
  margin:0 5px;
  transition: border-color 2.5s ease;
}
#P1, #P2, #P3, #P4 {
  border-color: #e4e9f6;
}
</style>
<script>
var aantal=4, wijzer=0;
function verzetPuntje() {
  wijzer++;
  if (wijzer > aantal) {
    wijzer = 1;
    document.getElementById('P'+aantal).style.borderColor
      = "#e4e9f6";
  } else {
    if (wijzer > 1)
      document.getElementById('P'+(wijzer-1)).style.borderColor
        = "#e4e9f6";
  }
  document.getElementById('P'+wijzer).style.borderColor = "#000";
  return;
}
function doeHet() {
  setInterval('verzetPuntje()',1500);
}
window.onload = doeHet;
</script>

(Zet dit in de <BODY> op de plaats waar de puntjes moeten verschijnen).

<ul class="puntjes">
  <li id="P1"></li>
  <li id="P2"></li>
  <li id="P3"></li>
  <li id="P4"></li>
</ul>

Downloaden:
 
Druk op de knop:  File: voorb560.zip, 643 bytes.

Opmerking:
 
Het item Laadpuntjes III toont een andere uitvoering van dit soort laadpuntjes.