Voortgangsindicator X: Ronde progress-bar

Hier rechts zie je een grijze cirkel, met in het midden een percentage. Dit is een progress-bar. Als je HIER klikt of tikt zie je hem werken.
Ververs de pagina / het frame om het effect nog een keer te laten werken.

De code kun je downloaden om zelf te gebruiken.

• Er worden twee items besproken:
  1. De werking van het script.
  2. Inbouwen in je eigen site.
   
• Inspiratie voor dit item is ontstaan door diverse websites waar dit op wordt gebruikt, maar ook het bekende groeiende cirkeltje dat veel wordt gebruikt op mobiele apparaten.
• De code bestaat uit HTML, CSS (in de file styles.css) en JavaScript (in de file script.js).
   
• De werking van het script
• Als je op de LINK klikt of tikt, wordt er een JavaScript-function gestart dat elke seconde, in stapjes van 5%, de grijze cirkel opvult met blauw. Daarbij wordt ook de tekst in de cirkel aangepast.
• Als de cirkel helemaal vol is (100%), stopt het script.
• Het script van het voorbeeld kan niet opnieuw worden gestart. Daarvoor moet de pagina of het frame worden vernieuwd.
   
• HTML
• De HTML bestaat uit twee geneste <div>-tags. De buitenste heeft de klasse container en dient alleen om de cirkel te positioneren in het document.
• De binnenste <div>-tag heeft id="progress-circle". Het is de cirkel zelf.
• Binnen progress-circle is er nog een <span>-tag met id="percentage". Die bevat de tekst in de cirkel.
   
• CSS
• De klasse container positioneert de cirkel in het document, relatief ten opzichte van de plaats waar deze wordt gebruikt. In het voorbeeld is dat aan de rechterkant. Er is een marge van 20px.
• Binnen container is er de id progress-circle. Dit is een vierkant met breedte van 100px. De hoogte is niet opgegeven. In plaats daarvan is aspect-ratio:1 gebruikt. Daardoor, in combinatie met border-radius:50%, ontstaat een cirkel met een diameter van 100px. Door voor aspect-ratio een andere waarde dan 1 te nemen, ontstaat een ellips.
• De achtergrondkleur van progress-circle is niet opgegeven, in plaats daarvan is background:conic-gradient(navy 0, #ccc 0) gebruikt. CSS interpreteert dit als background-image. Er wordt een opgevuld cirkel-segment getekend met kleur navy, met een lengte van nul. De rest van de cirkel is zilvergrijs (#ccc) en loopt van nul tot nul (= 360°).
• Om er een niet-opgevulde cirkel van te maken is met progress-circle de pseudoklasse before nodig. Ook dit is een cirkel. De eigenschap inset:10px zorgt ervoor dat de afmetingen van de pseudoklasse zowel boven en onder, als links en rechts, met 10px worden verminderd. Door de achtergrondkleur gelijk te nemen aan die van het document, ontstaat een niet-opgevulde cirkel.
  Het ligt voor de hand om transparent te kiezen als achtergrondkleur van de pseudoklasse. Dat zou betekenen dat je er dwars doorheen kijkt en je de achtergrondkleur van de cirkel (de klasse progress-circle) ziet. Maar dat is niet de bedoeling! Om een niet-opgevulde cirkel te maken moet je de achtergrondkleur van het document gebruiken als achtergrondkleur van de pseudoklasse.
• De pseudoklasse moet absoluut zijn gepositioneerd binnen de klasse zelf, zodat de cirkels goed op elkaar liggen (lees: hetzelfde middelpunt hebben).
• De id percentage maakt de tekst in de cirkel op. In de HTML moet die in een <span>-tag zitten, anders werkt de eigenschap text-align:center niet.
   
• JavaScript
• Voor de werking van de ronde progress-bar zijn één variabele en één function nodig. Om de demo te laten werken zijn twee extra variabelen en twee extra functions nodig.
• In de variabele stappen wordt bijgehouden welk percentage van de cirkel blauw gekleurd is. De functon doeStap() zorgt ervoor dat het blauwe deel van de cirkel wordt aangepast.
• stappen wordt geïnitialiseerd op 0. doeStap() wijzigt de CSS-eigenschap van background binnen de id progress-circle en de innerHTML van de id percentage.
   
• Door een klik op een van de links wordt de function toonDemo() gestart. Deze function laat via setInterval() de function stapDemo() elke seconde uitvoeren. Als echter stappen groter is dan nul, stopt de function meteen. Op deze manier wordt ervoor gezorgd dat de ronde progress-bar maar één keer kan worden gestart.
• stapDemo() verhoogt eerst de waarde van stappen met stapje. Als stappen groter wordt dan 100, wordt stappen gelijk gemaakt aan 100. Daarna wordt doeStap() aangeroepen.
• Nadat doeStap() zijn werk heeft gedaan, wordt gekeken of stappen gelijk is aan 100. Als dat zo is, wordt ClearInterval() aangeroepen om de herhaalde aanroep van stapDemo() te stoppen.
   
• Inbouwen in je eigen site
• Download de zip-file en pak hem uit. Bouw de code op zoals hieronder is aangegeven. Je hebt nu een werkend voorbeeld.
• Pas de diameter (width) en de kleuren van de cirkel aan. Maak de achtergrondkleur van de pseudoklasse gelijk aan de achtergrondkleur van het document.
• Pas het JavaScript aan voor je eigen behoefte.
   
• Tenslotte:
• Dit is speciaal bedoeld voor het volgen van een langdurige berekening waarvan de duur, gemeten in het aantal rekenstappen, bekend is. Het is daarom minder geschikt voor berekeningen waarin iteratieprocessen een rol spelen.
• Je kunt de teller ook in ongelijke stappen verzetten. Zet daarvoor stappen op de gewenste waarde en roep doeStap() aan. Let er daarbij wel op dat stappen niet groter mag worden dan 100, maar ook niet kleiner mag zijn dan nul.

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="styles.css">
<script src="script.js"></script>

(Zet dit in de <BODY>, op de plaats waar de cirkel moet verschijnen ).

<div class="container">
  <div id="progress-circle">
    <span id="percentage">0%</span>
  </div>
</div>

Downloaden:
 
Druk op de knop:  File: voorb740.zip, 1302 bytes.