Laadpuntjes IV

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. Hiernaast zie je een mogelijke uitvoering.
Ververs de pagina / het frame om het effect nog een keer te zien.

Deze laadpuntjes komen het meest tot hun recht als de wachttijd kort is. Denk bijvoorbeeld aan het ophalen van een grote afbeelding uit een bibliotheek.

Inspiratie voor het onderwerp van deze pagina is ontstaan door de website kerkdienstgemist.nl. Daarin zijn (soms) 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
• Er zijn twee sets van elk drie puntjes (rood en blauw) die tegelijkertijd worden geanimeerd.
• 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 tweetal ongeordende lijsten (<ul>) die bij elkaar worden gehouden door een container, in dit geval een <div>-tag met de klasse laadpuntjes.
• De container dient om ruimte te maken waar de puntjes in werken en om ze te positioneren in het document.
• De rode puntjes worden gemaakt met een <ul> met de klasse stipjes. De blauwe puntjes worden gemaakt met een <ul> met de klasse puntjes. Met behulp van CSS zijn die bovenop elkaar gelegd.
• De list-items hebben elk een uniek id voor de communicatie met JavaScript. De list-items mogen geen content bevatten.
   
• CSS
• De bevat instellingen voor de klassen laadpuntjes, puntjes en stipjes. Verder zijn er instellingen voor <li>tags met de klasse puntjes en stipjes.
  Omdat de puntje benaderbaar moeten zijn met JavaScript, heeft elke <li>tag een uniek id, dat ook wordt gebruikt om instellingen te maken.
   
• De klasse laadpuntjes (de container) positioneert aan de rechter marge van het document (float:right). Dat gebeurt op de plaats waar de HTML in het document wordt gezet (position:relative). Verder wordt hier de ruimte die het element inneemt in het document opgegeven met width en height.
• De klassen puntjes en stipjes lijken heel veel op elkaar. Het enige verschil is de kleur: blue voor de puntjes, #d00 (donker rood) voor de stipjes.
• De content met deze klassen heeft geen bullets. De items worden achter elkaar gezet. Om het eenvoudiger te maken de grootte van de container te bepalen zijn display:inline-block en box-sizing:border-box toegevoegd.
• de puntjes worden gemaakt met items zonder content maar met een rand, waarvan de afrondingsstraal 50% is.
   
• De idents voor de blauwe puntjes zijn P1, P2 en P3. Voor de rode puntjes zijn Q1, Q2 en Q3 gebruikt. Ook hier is de CSS bijna identiek. De puntjes zijn absoluut gepositioneerd binnen de container.
• Alle puntjes zijn gepositioneerd op 15px van boven. Bij de rode puntjes blijft dat zo, bij de blauwe puntjes wordt dat dat 0. Dit omdat de rand 15px breder wordt gemaakt door het JavaScript en daardoor de oorsprong van het item 15px naar boven verschuift.
• De waarde van left is steeds gelijk in paren voor P1 en Q1, P2 en Q2 en P3 en Q3.
• Door de waarde van left aan te passen, blijkt het middelpunt van de blauwe puntjes op zijn plaats, maar verschuiven de rode puntjes naar rechts.
• Het JavaSrcipt laat de blauwe puntjes groeien en verlaagt tegelijkertijd de opacity naar nul. Daardoor worden ze onzichtbaar. Dit gebeurt in 5 seconden.
• De rode puntjes verplaatsen zicht naar rechts met het groeien van de puntjes. De opacity van de rode puntjes blijft daarbij constant. Het verplaatsen van de rode puntjes duurt 7 seconden.
• Zodra de animatie van het derde puntje is gestart vervagen ook de rode puntjes tot ze verdwenen zijn. Dat gebeurt ook in 7 seconden. Dit wordt geregeld door de JavaScript-function stopNu().
   
• JavaScript
• Het JavaScript verzorgt het starten en weer stoppen van de animatie. Zodra de pagina is geladen wordt de function doeHet() gestart. Deze function start de function groeiPuntje(), met tussenpozen van 1 seconde.
• Er zijn twee belangrijke variabelen, te weten aantal en wijzer. aantal bevat het aantal puntjes, in dit geval 3. wijzer geeft aan van welke van de (drie) puntjes de animatie wordt gestart.
• De function groeiPuntje() verhoogt de waarde van wijzer en maakt verwijzingen naar de id's Px en Qx. Deze worden opgeslagen in de variabelen aa resp. bb. Van beide puntjes wordt de waarde van left aangepast. Van de blauwe puntjes worden ook de opacity (wordt nul, dus transparant), de border-width (wordt 20px) en top aangepast. Het vloeiende verloop van de animatie wordt geregeld door CSS.
• De ronde puntjes worden gemaakt met een lege tag met een rand met zekere dikte en een afrondingstraal van 50%. De oorsprong van de puntjes is de linker bovenhoek. Als een rondje groter wordt, verplaatst de oorsprong zich. Om dat op te vangen moeten top en left worden aangepast.
• Als de animatie van het laatste puntje is gestart, zijn aantal en wijzer gelijk aan elkaar. Als die conditie optreedt wordt de function stopNu() aangeroepen. Deze function stopt het herhaald aangeroepen van groeiPuntje() en zet de opacity van de rode puntjes op nul, waardoor ze verdwijnen.
   
• Inbouwen in je eigen site
• Download de .zip-file en pak hem uit. Zet de code in je document zoals hieronder is aangegeven. Je hebt nu een werkend voorbeeld.
• Pas de CSS van de klasse laadpuntjes aan zodat het effect verschijnt op de gewenste plaats.
• Pas de kleuren en de duur van de animatie aan in de klassen puntjes en stipjes.
• Als je de grootte van de puntjes wilt veranderen dan doe je dat door de border-width te veranderen in de CSS en in het JavaScript. Dan veranderen ook de eigenschappen top en left in zowel de CSS als het JavaScript.
• Als je de grootte van de puntjes verandert, moet je ook de height van de klasse laadpuntjes meenemen.
   
• Het is mogelijk puntjes toe te voegen. Dat doe je door de id's P4 en Q4 op te nemen in de HTML en de CSS. De JavaScript-variabele aantal wordt 4. De function groeiPuntje () krijgt een case 4: erbij.
• Let op de regelmaat die er is in de waarden van de eigenschap left en gebruik die om left voor het vierde puntje te berekenen.
• Als je puntjes toevoegt, moet de width van de klasse laadpuntjes worden vergroot.

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>
.laadpuntjes {
  position: relative;
  float: right;
  margin-left: 20px;
  height: 40px;
  width: 125px;
}
.puntjes .stipjes {
  list-style-type:none;
}
.stipjes li {
  display:inline-block;
  border: 5px solid #d00;
  border-radius: 50%;
  box-sizing: border-box;
}
.puntjes li {
  display:inline-block;
  border: 5px solid blue;
  border-radius: 50%;
  box-sizing: border-box;
}
#P1, #P2, #P3 {
  position:absolute;
  top: 15px;
  opacity: .8;
  z-index: 1;
  transition: all 5s ease;
}
#Q1, #Q2, #Q3 {
  position:absolute;
  top: 15px;
  opacity: .8;
  transition: all 7s ease;
}
#P1 { left: 15px }
#P2 { left: 50px }
#P3 { left: 85px }
#Q1 { left: 15px }
#Q2 { left: 50px }
#Q3 { left: 85px }
</style>
<script>
var aantal = 3, wijzer = 0, aa, bb, groei;
function groeiPuntje() {
  wijzer++;
  aa = document.getElementById('P'+wijzer);
  aa.style.top = 0;
  bb = document.getElementById('Q'+wijzer);
  switch(wijzer) {
    case 1: aa.style.left = "5px";  bb.style.left = "20px"; break;
    case 2: aa.style.left = "45px"; bb.style.left = "65px"; break;
    case 3: aa.style.left = "85px"; bb.style.left = "110px"; break;
  }
  aa.style.borderWidth = "20px";
  aa.style.opacity = 0;
  if (wijzer == aantal) stopNu();
  return;
}
function doeHet() {
  groei = setInterval('groeiPuntje()',1000);
  return;
}
function stopNu() {
  clearInterval(groei);
  for (var i = 1; i <= aantal; i++)
    document.getElementById('Q'+i).style.opacity = 0;
  return;
}
window.onload = doeHet;
</script>

(Zet dit in de <BODY> op de plaats waar het effect moet verschijnen).

<div class="laadpuntjes">
  <ul class="puntjes">
    <li id="P1"></li>
    <li id="P2"></li>
    <li id="P3"></li>
  </ul>
  <ul class="stipjes">
    <li id="Q1"></li>
    <li id="Q2"></li>
    <li id="Q3"></li>
  </ul>
</div>

Downloaden:
 
Druk op de knop:  File: voorb625.zip, 855 bytes.