Geanimeerde bullets als voortgangsindicator

GegevensControleren BetalenKlaar!

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

Gebruik:

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: Download deze code  File: voorb737.zip, 1728 bytes.

 
terug

html-737; Laatste wijziging: 17 februari 2024