Ben's Hobbyhoekje -- Laadpuntjes met jQuery

Laadpuntjes met jQuery

Sommige websites hebben veel tijd nodig om te laden. Vaak ligt dat aan de webserver of aan de site zelf, maar soms kan het niet anders. In zo'n geval is het verstandig om te laten zien dat er iets gebeurt. Dat doe je het beste met wat beweging. Op deze pagina wordt code getoond die dat doet.

De oorspronkelijke versie van deze code is gemaakt door Steve Dakh, die het onder de naam slavik0329 heeft gepubliceerd op GitHub. Je kunt de originele code daar downloaden.

De code is voor deze website wat gefatsoeneerd. Overbodige zaken zijn verwijderd.
De code van het voorbeeld kun je downloaden om zelf te gebruiken.

Er worden twee items besproken:
1. De werking van het script, in algemene termen.
2. Gebruiken in je eigen site.
De werking van het script
Dit is een jQuery plug-in. Je hebt dus jQuery nodig, versie 1.7.1 of later. Die betrek je het beste van een CDN, dat scheelt tijd bij het laden van de pagina.
Uiteraard is er de JavaScript-code van de plug-in zelf. Die staat in het bestand jquery.progressdots.js. Daar hoef je niets aan te wijzigen om het te gebruiken.
De plug-in gebruikt CSS voor het maken en laten bewegen van de puntjes. Die staat in het bestand jquery.progressdots.css. Ook hier hoef je niets aan te wijzigen.
De opmaak van de grijze balk gaat ook met CSS. Die staat echter los van de CSS in jquery.progressdots.css en staat daarom in een apart style-blok.
Van de in het voorbeeld gebruikte instellingen voor progressBox zijn border, background-color en margin niet echt nodig. De rest moet aanwezig zijn, anders wordt er geen plaats gereserveerd voor het tonen van het effect.
De beweging wordt in gang gezet met een $(document).ready-function, die de methode dottify() van <div id="progressBox"> opstart.
De plug-in heeft een aantal default-instellingen, die je kunt veranderen door ze aan dottify() mee te geven als JSON-object.

De mogelijkheden zijn:

Naam		Betekenis
numDots		Aantal punten. Default: 5. In het voorbeeld: 10.
swoopPause		Tijdsinterval (ms) tussen het maken van twee opeenvolgende punten. Default: 200. Het voorbeeld gebruikt de default-waarde.
dotColor		Kleur van de punten. Default: "#0A78C7". Het voorbeeld gebruikt de default-waarde.
dotSize		Grootte van de punten. Default: "12px". Het voorbeeld gebruikt 20px.
radius		Afrondingsstraal van de punten. Default: "100%". Het voorbeeld gebruikt 40%
randomColors		Kleur van de punten wordt willekeurig gekozen. Dit is `true` of `false`. Default: `false`. In het voorbeeld: `true`.
progress		Gedrag als progress-bar (de balk loopt steeds verder vol). Dit is `true` of `false` Default: `false`. Het voorbeeld gebruikt de default-waarde.
percent		Percentage dat de progress-bar moet vollopen. Dit werkt alleen als progress=`true`. Default: 0. Het voorbeeld gebruikt de default-waarde. Gebruik van percent in combinatie met progress=false maakt dat er geen puntjes te zien zijn.

Het is belangrijk dat het data-type correct is, dus: een getal waar een getal nodig is, een string waar een string nodig is.
Gebruiken in je eigen site
Pak de download-file uit en maak de code zoals hieronder is aangegeven.
Stel de opties in naar je eigen smaak.
Als je hier een echte progress-bar van wilt maken doe je dat door progress op true te zetten. Eventueel kun je de beginwaarde van percent instellen op een getal tussen 1 en 100. Je werkt percent bij met behulp van de aanroep progressBox.setProgress( xx );, waarbij xx het gewenste percentage is.
In plaats van progressBox kun je elke andere naam gebruiken. Je kunt hiermee ook meerdere progress-bars op het scherm zetten.

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>).

<link rel="stylesheet" href="jquery.progressdots.css">
<style>
#progressBox {
border: 4px solid #D8D8D8;
background-color: #D8D8D8;
width: 80%; height: 20px;
margin: 0 auto;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="jquery.progressdots.js"></script>

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

<div id="progressBox"></div>

(Zet dit aan het eind van de <BODY>, net vóór de </body>-tag).

<script>
$(document).ready(function (){
$( '#progressBox' ).dottify({numDots:10, radius: '40%',
randomColors: true, dotSize: '20px' });
});
</script>

Downloaden:

Druk op de knop: File: voorb507.zip, 2135 bytes.