Geanimeerde bullets als voortgangsindicator

Hierboven zie je een voortgangsindicator in vier stappen, zoals je die wel ziet bij het afrekenen in een webwinkel. De stappen worden aangegeven met rondjes (bullets) die worden verbonden door een lijntje. Na elke afgeronde stap wordt het betreffende rondje ingevuld met een animatie.
Naar stap 1: Gegevens >> Druk een paar keer op de knop hier rechts om het voorbeeld te zien werken. Na stap 4 verdwijnt de knop. Ververs de pagina als je het voorbeeld nog een keer wilt zien.

• Er worden twee items besproken:
  1. De werking van het script.
  2. Toepassen in je eigen site.
   
• Inspiratie voor dit item is ontstaan door de diverse webwinkels die ik bezoek, in combinatie met de rubriek "Dagelijkse vernieuwing" in de Bible-app van YouVersion voor Android. Voor deze pagina heb ik iets nagebouwd wat er op lijkt.
• De code bestaat uit HTML, CSS (in de file styles.css) en JavaScript (in de file script.js).
   
• De werking van het script
• Bij het openen van de pagina worden de hele rij met bullets en de lijntjes zichtbaar gemaakt. De kleur van de bullets is (hexadecimaal) #eee, dit is lichtgrijs. De kleur van de lijntjes, de rand van de bullets en de teksten onder de bullets is #333, dit is heel donker grijs.
• Een klik op de knop (dit is te vergelijken met het afronden van een stap in een bestelproces) laat de vulkleur van de eerste bullet van grijs in zeegroen veranderen: Een element met een gradiënt van transparant naar zeegroen (#008080) w0rdt van onderen de cirkel binnengeschoven. De tekst op de knop verandert.
• Een tweede klik op de knop laat de tweede bullet van kleur veranderen, op dezelde manier als bij de eerste bullet. Ook de tekst op de knop wordt veranderd.
• Bij een derde klik op de knop gebeurt het zelfde als bij de eerste twee knoppen.
• Bij een vierde klik op de knop gebeurt weer het zelfde, maar de knop verdwijnt.
• Zie ook de tekst onder het kopje "Tenslotte..."
   
• HTML
• De HTML bestaat uit een enkele <div>-tag met de klasse container. Binnen deze tag bevinden zich <div>-tags waarmee de bullets en de lijntjes worden gemaakt, en <span>-tags voor de onderschriften.
• De <div>-tags binnen de <container>-tags hebben de klasse rondje en een uniek id om de opvulkleur te kunnen veranderen met JavaScript.
• Binnen elke id voor de rondjes is er ook een <div>-tag met klasse klaar en een uniek id. Dit bevat de opvulkleur die door JavaScript zichtbaar wordt gemaakt als er op de knop is geklikt.
• De id's worden ook gebruikt om de bullets, de lijntjes en de teksten te positioneren.
• In een een productieversie van je website moet je de HTML voor de knop mogelijk weglaten.
   
• CSS
• De CSS in de file styles.css bevat alleen gegevens over de bullets, de lijntjes en de tekst. Voor de knop is alleen inline-CSS gebruikt. De inhoud en de zichtbaarheid van de knop wordt geregeld door JavaScript.
• De klasse container bevat de lijntjes, de bullets en de teksten. Deze wordt in de regel gecentreerd met margin:0 auto;.
• De rondjes, de zeegroene vulkleur, de lijntjes en de teksten worden opgemaakt in de klassen rondje, klaar, lijntje en tekst. Het betreft hier de zaken die niet worden veranderd door JavaScript.
• Om elk onderdeel apart aan te kunnen spreken heeft elk onderdeel een uniek id, waarvan de naam voor zich spreekt. Hier wordt de positie binnen de container vastgelegd (de positie van klaar wort vastgelegd binnen rondje).
• De positie van klaar wordt veranderd door JavaScript, de kleuren niet.
   
• De kleuren worden veranderd door JavaScript, de posities niet. Om de kleurverandering vloeiend te laten verlopen is transition ingezet. De verandering duurt 1.5 seconde, de snelheid is constant.
   
• JavaScript
• De function toonStap() zorgt voor het aanpassen van de vulkleur van de bullets. De parameter stap bepaalt welke een andere kleur krijgt:
  º  Als stap = 1 : bullet 1.
  º  Als stap = 2 : bullet 2.
  º  Als stap = 3 : enzovoort.
   
• De switch is alleen nodig in het voorbeeld. Let op de manier waarop onclick="toonStap()" wordt aangepast. Bronnen op internet geven aan dat dit de enige betrouwbare methode is.
  In een een productieversie van je website moet je de switch mogelijk weglaten.
   
• Toepassen 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 kleuren in de CSS en het JavaScript aan naar je eigen smaak.
• Verwijder zo nodig de HTML voor de knop. Verwijder dan ook de switch uit de JavaScript-functiontoonStap().
• Pas in de CSS de begin-kleuren van de bullets, de opvulkleur, de lijntjes en de teksten aan.
   
• Tenslotte...
• Het voorbeeld zul je in de praktijk anders gebruiken dan hier is getoond. Stel jezelf een formulier voor dat bestaat uit meerdere bladzijden. Bij het openen van de pagina is bladzijde 1 zichtbaar, de rest is met display:none onzichtbaar gemaakt. Als deze eerste bladzijde is ingevuld klikt de gebruiker op een knop die de eerste pagina verbergt en de tweede pagina zichtbaar maakt (display:block), en ook toonStap(1) aanroep om de eerste bullet te laten verkleuren.
  Als de tweede pagina is ingevuld en er weer op de knop wordt geklikt, wordt de tweede pagina verborgen en wordt de derde pagina zichtbaar gewaakt. De aanroep toonStap(2) verandert de tweede bullet, enzovoort.
• Merk op dat je de knop voor de 'volgende pagina' kunt programmeren zoals op deze pagina is gebeurd. Die moet dan wel buiten de verborgen / zichtbare gedeelten van het formulier staan.

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 bullets moeten verschijnen).

<div class="container">
  <div class="rondje" id="rondje_1"><div class="klaar" id="klaar_1"></div></div><div class="lijntje" id="lijntje_1"></div>
  <div class="rondje" id="rondje_2"><div class="klaar" id="klaar_2"></div></div><div class="lijntje" id="lijntje_2"></div>
  <div class="rondje" id="rondje_3"><div class="klaar" id="klaar_3"></div></div><div class="lijntje" id="lijntje_3"></div>
  <div class="rondje" id="rondje_4"><div class="klaar" id="klaar_4"></div></div>
  <span class="tekst" id="tekst_1">Gegevens</span><span class="tekst" id="tekst_2">Controleren</span>
  <span class="tekst" id="tekst_3">Betalen</span><span class="tekst" id="tekst_4">Klaar!</span>
</div>

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

<button type="button" id="knop" onclick="toonStap(1)" style="visibility:visible;float:right;margin-left:40px;">Naar stap 1:
Gegevens &gt;&gt;</button>

Downloaden:
 
Druk op de knop:  File: voorb737.zip, 1728 bytes.