Laadpuntjes III

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.

Inspiratie voor het onderwerp van deze pagina is ontstaan door de website Luchtmeetnet.nl. 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 <div>-tag met de klasse laadpuntjes. Deze dient als container om de puntjes te positioneren op de pagina.
• De puntjes zelf worden gemaakt met een <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 container, met de klasse laadpuntjes, is een blok van 100 × 100 pixels. Het wordt aan de rechterkant gehouden met float: right en heeft (voor deze pagina) geschikte marges. De puntjes worden gecentreerd in het blok getoond.
• De puntjes zelf worden gemaakt met een ongeordende lijst (<ul>), met de klasse puntjes. De bullets aan het begin van de list-items zijn uitgeschakeld. Door de keuze van de padding staan de puntjes min-of-meer onderin de container.
• Elk punje apart (in het voorbeeld) heeft afmetingen van 12 × 12 pixels. De rand is 6 pixels breed. De straal is 50%, zodat er cirkels ontstaan. De puntjes staan naast elkaar door display: inline-block;.
  Mogelijke problemen met afmetingen en mages worden voorkomen met box-sizing: border-box;
• Elk puntje heeft een eigen, uniek id In het voorbeeld zijn dat: P1, P2 en P3. De nummering moet beginnen bij 1 en moet aaneen gesloten zijn.
• De opacity is op 0.3 gezet, dat is bijna doorzichtig. Dat wordt tijdens de beweging door JavaScript op 1 gezet. Daarvoor is een transition gedefinieerd van 0,5 seconde.
• Voor de beweging is een 2D-transform opgegeven: translate(0,0).
   
• JavaScript
• JavaScript wordt gebruikt om de beweging te starten en te beheren. CSS zorgt voor de beweging en de variatie van de doorzichtigheid.
• Zodra de pagina is geladen wordt de function doeHet() gestart. Dit loopt via windows.onload.
• doeHet() start de funtion verzetPuntje(). Dat wordt elke 150 ms herhaald, via setInterval(). De timer wordt bewaard in de variabele verzet. doeHet() start ook de function stopNu() op, met een vertraging van 9000 ms, via setTimeout().
  De animatie duurt dus ca. 9 seconden.
• stopNu() stopt de timer die in verzet is opgeslagen, via clearInterval(). stopNu() stuurt ook de (drie) puntjes terug naar hun beginpositie, door transform terug te zetten naar translate(0,0).
• De function verzetPuntje() start de beweging omhoog of juist weer omlaag. Daarvoor beschikt het over drie globale variabelen: aantal, wijzer en omhoog.
  º  aantal bevat het aantal puntjes. In het voorbeeld zijn dat er drie. Dit gedraagt zich als een constante en wordt tijdens de uitvoering van het script dus ook niet veranderd.
  º  Wijzer is eigenlijk een pointer. Deze wijst aan van welke van de puntjes de beweging moet worden gestart.
  º  omhoog is een logische variabele, die aangeeft of de beweging omhoog (true) of omlaag (false) moet gaan.
• De puntjes hebben elk een uniek id: P1, P2 en P3. Door de letter P de combineren met de waarde van wijzer wordt eenduidig het juiste puntje gekozen.
• wijzer wordt bij elke stap met één opgehoogd. Zodra wijzer een waarde heeft die groter is dan aantal wordt deze teruggezet op 1.
• De puntjes gaan eerst een voor een omhoog, daarna komen ze een voor een weer naar beneden.
• Bij de beweging omhoog wordt ook de opacity op 1 gezet. De puntjes gaan 40 pixels omhoog (translate(0,-40px); de positieve Y-richting op het scherm is naar beneden). De animatie van de beweging en de doorzichtigheid wordt verzorgd door CSS.
• Bij de beweging omlaag wordt ook de opacity terug gezet op 0.3. De puntjes stonden 40 pixels omhoog en gaan weer naar beneden (translate(0,0); De translatie is altijd t.o.v. de oorspronkelijke stand). De animatie van de beweging en de doorzichtigheid wordt verzorgd door CSS.
   
• Inbouwen in je eigen site
• Download de .zip-file en pak hem uit. Bouw de code op zoals op deze pagina is aangegeven. Je hebt nu een werkend voorbeeld.
• Pas de CSS aan aan je eigen wensen: kleuren, grootte van de puntjes, enz.
• De container .laadpuntjes staat nu rechts uitgelijnd. Die kun je ook centreren of links uitlijnen.
• Je kunt de hoogte van de de container veranderen. In dat geval moet je behalve de height in .laadpuntjes ook de afstand van de verticale beweging (nu -40px) aanpassen in het JavaScript (2×!).
• Als je meer puntjes wilt, dan kan dat. Voeg aan de HTML <li>-tags toe met id="P4", id="P4", enz. Breid de CSS-selector #P1, #P2, #P3 uit met ,#P4, #P5, enz.
  Vergroot in dat geval ook de width van .laadpuntjes

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 {
  float: right;
  margin: 0 20px;
  height: 100px;
  width: 100px;
  text-align: center;
}
.puntjes {
  list-style-type:none;
  padding:60px 0 0 0;
}
.puntjes li {
  display:inline-block;
  width:12px;
  height:12px;
  border: 6px solid blue;
  border-radius:50%;
  margin:0 5px;
  box-sizing: border-box;
}
#P1, #P2, #P3 {
  opacity: .3;
  transform: translate(0,0);
  transition: all 0.5s ease;
}
</style>
<script>
var aantal=3, wijzer=0, verzet=null;
var omhoog=true;
function verzetPuntje() {
var aa;
  wijzer++;

  if (wijzer > aantal) {
    wijzer = 1;
    aa = document.getElementById('P'+wijzer);
    omhoog = !omhoog;
    if (omhoog) {
      aa.style.transform = "translate(0, -40px)";
      aa.style.opacity = 1;
    } else {
      aa.style.transform = "translate(0, 0)";
      aa.style.opacity = "0.3";
    }
  } else {
    aa = document.getElementById('P'+wijzer);
    if (omhoog) {
      aa.style.transform = "translate(0,-40px)";
      aa.style.opacity = 1;
    } else {
      aa.style.transform = "translate(0, 0)";
      aa.style.opacity = "0.3";
    }
  }
  return;
}
function doeHet() {
  verzet = setInterval('verzetPuntje()',150);
  setTimeout('stopNu()',9000);
  return;
}
function stopNu() {
  clearInterval(verzet);
  for (var i=1; i<=aantal; i++)
    document.getElementById('P'+i).style.transform = "translate(0,0)";
  return;
}
window.onload = doeHet;
</script>

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

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

Downloaden:
 
Druk op de knop:  File: voorb597.zip, 810 bytes.

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