Laadcirkel 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.
Heel bekend is het rondje met een ronddraai effect, zoals hier links. Dat is meestal een eenvoudig .GIF-plaatje dat geen relatie
heeft met de pagina waar je op wacht.
Dit plaatje is nogal irritant. Klik er op om het te laten verdwijnen
Het kan echter ook anders, zoals hier onder te zien is. Klik op deze om het effect te starten.
Op deze pagina wordt de code getoond om dit te maken.
- Er worden twee items besproken:
- De werking van het script.
- Inbouwen in je eigen site.
- De werking van het script
- Ik heb het script gevonden op technoplugin.com. Die site lijkt niet meer te worden onderhouden.
- Van het script kan alleen een geminimaliseerde versie worden gedownload. Dat maakt het bijna onmogelijk om iets te zeggen over de werking, behalve dat het script ingewikkeld is. Bespreking van de werking van het script blijft dus achterwege, we beperken ons tot een opsomming van de mogelijkheden.
- De code bestaat uit JavaScript en een beetje HTML en een beetje CSS. De opmaak van de cirkel wordt geregeld door het JavaScript.
- De JavaScript-code staat in de file circularloader-v1.3.js. Het is een jQuery-toepassing, dat betekent dat je jQuery
nodig hebt. Deze site gebruikt versie 1.12.4.
Zowel de links naar jQuery als naar circularloader-v1.3.js staan in de <head>.
- De HTML bestaat uit twee geneste <div>-tags. De buitenste, met class="container", zorgt voor de positionering in het document. De binnenste, met id="divProgress", bevat de laadcirkel.
- Direct onder de HTML staat en stukje JavaScript dat de methode circularloader() toevoegt aan de <div id="divProgress"> Tevens wordt de opmaak van de cirkel hier ingesteld.
- De instelmogelijkheden van de cirkel staan in onderstaand overzicht. Default-waarden heb ik niet kunnen achterhalen. Daarom is
het verstandig om altijd alle opties mee te geven.
Naam Betekenis backgroundColor Kleur van de het gebied binnen de cirkel.
Hier: "#dfd" (lichtgroen)fontColor Kleur van de cijfers in de cirkel.
Hier: "#333"fontSize Grootte van de cijfers in de cirkel, in px.
Hier: "30px". De eenheid px mag worden weggelaten. Andere eenheden (zoals em) werken niet.radius Straal van de cirkel, in px.
Hier: 70. Merk op dat dit een getal is, geen string.progressBarBackground Kleur van de cirkel, incomplete deel.
Hier: "fcc" (lichtrood)progressBarColor Kleur van de cirkel, complete deel.
Hier: "09c" (blauw)progressBarWidth Breedte van de cikel, in px.
Hier: 25. Merk op dat dit een getal is, geen string.progressPercent Percentage dat het laadproces klaar is. Dit is het getal dat midden in de cirkel staat.progressValue Beginwaarde van progressPercent. Meestal neem je hier nul voor, maar het kan ook wat anders zijn, bijv. 22 of 31.
Hier: 0.showText Toon het voortgangspercentage progressPercent (true) of niet (false).
Hier:true.title Tekst die boven de cirkel verschijnt. Als je die weg wilt laten vul je hier "" in (lege string).
Hier: "De pagina wordt geladen". - Na elke stap van het laadproces wordt circularloader() aangeroepen, met {progressPercent:
getal} als parameter. Hiermee verzet je de teller in het midden van de cirkel. Als 100% wordt bereikt stopt de teller uit zichzelf.
- Opmerking: In het voorbeeld op deze pagina wordt de teller elke seconde bijgesteld in stappen van 5%. Dat gebeurt
met behulp van setInterval(). Er wordt dus niets geladen.
- Deze methode is ook heel geschikt als voortgangsindicator bij grote berekeningen.
- Inbouwen in je eigen site
- Pak de downloadfile uit en bouw de code op zoals hieronder is aangegeven.
- Kies kleuren en afmetingen naar je eigen smaak en zet die in het JavaScript.
- Zorg dat je weet op welk moment je de teller moet verzetten. Elk deel van de pagina dat is geladen draait voor een zeker
percentage bij. Denk hierbij niet in termen van bytes, maar in termen van items: Plaatjes, CSS- en JavaScript bestanden, enz.
- Deze laadcirkel is bij uitstek geschikt als enkel item in het midden van een (openings-)pagina. Laat dan, zodra alles is geladen, de eerste "echte" pagina automatisch verschijnen.
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>
.container {
position:relative;
width:200px; height:205px;
margin:0 auto;
}
</style>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"
integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="
crossorigin="anonymous"></script>
<script src="circularloader-v1.3.js"></script>
(Zet dit in de <BODY> op de plaats waar de laadcirkel moet verschijnen).
<div class="container">
<div id="divProgress"></div>
</div>
<script>
// Maak de cirkel
$("#divProgress").circularloader({
backgroundColor: "#dfd", // Achtergrondkleur binnen de cirkel
fontColor: "#333", // Tekstkleur van de teller
fontSize: "30px", // Lettergrootte van de teller
radius: 70, // Straal van de cirkel
progressBarBackground: "#fcc", // Achtergrondkleur van de cirkel zelf
progressBarColor: "#09c", // Kleur van de ronde progress bar
progressBarWidth: 25, // Breedte van de progress bar
progressPercent: 0, // Voortgangspercentage, 0-100
progressValue:0, // Waarde waarmee de teller begint
showText: true, // Toon het voortgangspercentage of niet
title: "De pagina wordt geladen" // Toon de titel van de laadcirkel
}); // Cirkel gereed
</script>
ALLEEN VOOR DIT VOORBEELD: Laat de telller lopen
<button type="button" onclick="toonCirkel()">startknop</button>
<script>
var i = 0;
function toonCirkel() {
var abcd = setInterval('i++;$("#divProgress").circularloader({progressPercent: 5*i});',1000);
} // toonCirkel
</script>
Downloaden:
Druk op de knop:
File: voorb508.zip, 2334 bytes.
