Animatie tijdens het laden van een pagina III
Als je website een applicatie moet opstarten vanaf de server, kan dat soms even duren. Om de gebruiker dan niet op te zadelen met een leeg scherm, is een animatie een goed hulpmiddel om aan te geven dat er op de achtergrond iets gebeurt.
Op deze pagina wordt uit de doeken gedaan hoe je zoiets kunt maken. De code kun je downloaden om zelf te gebruiken, echter zonder de "Sluiten"-knop. Zie daarvoor punt 3 in het item Window openen/sluiten vanuit een ander window.
- Er worden twee items besproken:
- De werking van het script.
- Toepassen in je eigen site.
- Inspiratie voor dit item is ontstaan tijdens een surftochtje op internet, waarin ik terecht kwam op Dark CSS. Daar wordt getoond hoe je dit maakt. De code voor dit item is overgenomen van die site, met minimale aanpassingen.
- De code bestaat uit HTML en CSS, JavaScript wordt niet gebruikt.
- De werking van het script
- Het effect begint te werken zodra de pagina is geladen. Het is helemaal gemaakt met CSS.
- HTML
- De HTML bestaat uit een aantal geneste <div>-tags, waarvan de buitenste de klasse loader heeft. Deze zorgt ervoor dat het effect in het document gepositioneerd kan worden en houdt de boel bij elkaar.
- Binnen loader zijn twaalf <div>-tags geplaatst, dit zijn de twaalf radiale strepen waarmee het effect
wordt gemaakt. Hiervoor hebben ze allemaal de klasse bar. Elke afzonderlijke streep heeft daarbij nog een eigen klasse,
waarmee de oriëntatie wordt vastgelegd: bar1, bar2, bar3, enz. De strepen staan onder een hoek van
30° met elkaar.
- De <body> moet, behalve de hier beschreven <div>-tags, geen andere HTML bevatten.
- CSS
- De CSS van de <body> zorgt er voor dat het effect zowel horizontaal als verticaal gecentreerd wordt in het document. De achtergrondkleur van het document is ingesteld op lichtbeige.
- De klasse loader heeft alleen afmetingen. Door de CSS van de <body> wordt deze in het midden van het document gezet. loader is eigenlijk alleen drager van de twaalf strepen.
- De klasse bar definieert de twaalf strepen. Elke streep is 2px breed en 50px lang. De kleur is blauw (#0018f4).
- De strepen wordt in het midden van loader gezet en verticaal over 10px naar boven verplaatst. Elke streep afzondelijk wordt door de 'eigen' klasse (bar1, bar2, bar3, enz.) over een hoek van 0°, 30°, 60°, enz., gedraaid.
- De opacity is 0, dat wil zeggen dat de strepen bij aanvang van de animatie onzichtbaar zijn.
- De hele animatie duurt 1.2 seconde en wordt oneindig herhaald. Het verloop door de tijd is lineair.
De parameters voor de animatie worden in de CSS samengenomen in één regel, zie ook het item Over @keyframes. - De animatie laat de opacity van elke streep veranderen van 0 naar 1 (in 20% van de tijdsduur) en terug naar 0 (in de resterende 80%).
- De animaties worden om de 0.1 seconde gestart. Dat levert het ronddraaiende effect op.
- Toepassen in je eigen site
- Download de .zip-file en pak hem uit. Je hebt meteen een werkend voorbeeld. Eventueel hernoem je de file html796a.htm naar index.html.
- Om de animatie uit te schakelen kun je JavaScript gebruiken om de innerHTML van de loader te vervangen door
je eigen code. Pas daarbij ook de CSS van de <body> aan: verander of verwijder display, align-items,
justify-content en height.
- Tenslotte...
- Dit is ook geschikt als "wachtcursor" bij een langdurig rekenproces.
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>).
body {
margin:0;
height:100vh;
display:flex;
align-items:center;
justify-content:center;
background-color:#eaeae0;
}
.loader {
position:relative;
width:50px;
height:50px;
}
.bar {
position:absolute;
top:50%; left:50%;
width:2px; height:50px;
background-color:#0018f4;
border-radius:2px;
transform-origin:center -10px;
opacity:0;
animation:fade 1.2s linear infinite;
}
@keyframes fade {
0% { opacity:0; }
20% { opacity:1; }
100% { opacity:0; }
}
.bar1 {
transform:rotate(0deg);
animation-delay:0s;
}
.bar2 {
transform:rotate(30deg);
animation-delay 0.1s;
}
.bar3 {
transform:rotate(60deg);
animation-delay:0.2s;
}
.bar4 {
transform:rotate(90deg);
animation-delay:0.3s;
}
.bar5 {
transform:rotate(120deg);
animation-delay:0.4s;
}
.bar6 {
transform:rotate(150deg);
animation-delay:0.5s;
}
.bar7 {
transform:rotate(180deg);
animation-delay:0.6s;
}
.bar8 {
transform:rotate(210deg);
animation-delay:0.7s;
}
.bar9 {
transform:rotate(240deg);
animation-delay:0.8s;
}
.bar10 {
transform:rotate(270deg);
animation-delay:0.9s;
}
.bar11 {
transform:rotate(300deg);
animation-delay:1.0s;
}
.bar12 {
transform:rotate(330deg);
animation-delay:1.1s;
}
</style>
(Zet dit in de <BODY>)
<div class="loader">
<div class="bar bar1"></div>
<div class="bar bar2"></div>
<div class="bar bar3"></div>
<div class="bar bar4"></div>
<div class="bar bar5"></div>
<div class="bar bar6"></div>
<div class="bar bar7"></div>
<div class="bar bar8"></div>
<div class="bar bar9"></div>
<div class="bar bar10"></div>
<div class="bar bar11"></div>
<div class="bar bar12"></div>
</div>
Downloaden:
Druk op de knop:
File: voorb796.zip, 933 bytes.
