Animatie tijdens het laden van een pagina II
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. Als het gaat om een grote zoekactie, kan een radarscherm een illustratief zijn.
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 door een filmpje op internet, waarin wordt getoond hoe je zoiets maakt. Voor deze site is de code gemoderniseerd en wat eenvoudiger gemaakt.
- 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.
- De donkergroene achtergrond met het raster, de cirkels en de ronddraaiende lijn worden helemaal gemaakt met CSS.
- HTML
- De HTML bestaat uit een aantal geneste <div>-tags, waarvan de buitenste het id="container" heeft. Deze positioneert het effect in het document en houdt de boel bij elkaar. Ook wordt het raster van vierkanten hier gemaakt.
- Binnen de container is er een <div>-tag met id="cirkel". Die positioneert het ronde radarscherm binnen de container.
- Binnen de cirkel zijn er twee <div>-tags, waarvan de eerste, met id="ringen", de
vijf concentrische ringen bevat. De tweede <div>-tag, met id="draaier", bevat de ronddraaiende
lijn.
- De <body> moet, behalve de hier beschreven <div>-tags, geen andere HTML bevatten.
- CSS
- De CSS van de <body> zorgt er voor dat de radar zowel horizontaal als verticaal gecentreerd wordt in het document. De achtergrondkleur van het document is ingesteld op lichtgrijs.
- In de pseudo-selector root, die geldt voor alle items binnen de html-tag, wordt een drietal CSS-variabelen gedefinieerd: dGroen, mGroen en lGroen. Hiermee worden achtereenvolgens de donkergroene, de middelgroene en de lichtgroene kleuren van het radarscherm vastgelegd.
- In de id container worden de afmetingen en de achtergrondkleur gedefinieerd. Er is box-sizing:border-box;
gezet om te zorgen dat de afmetingen (inclusief randen) gelijk zijn aan de opgegeven width en height.
De position relative. Andere waarden kunnen de bij body ingestelde zaken verstoren. Er is een padding van 25px zodat de buitenste cirkel netjes binnen de randen van het radarscherm blijft. - Het raster wordt bovenop de container gelegd met de pseudoklasse after. Deze heeft dezelfde afmetingen als de container zelf en is absoluut gepositioneerd in de linker bovenhoek van de container.
- Het raster is opgebouwd uit vierkanten van 50px × 50px. Daarvan gaan er dus 6 × 6 in de container, die 300px × 300px is. Dat gaat met background-repeat:repeat;.
- De achtergrond-afbeelding zelf is gemaakt met behulp van background-image. Het is een transparante afbeelding met een lichtgroene bovenrand en een lichtgroene linker zijrand. De opacity staat op 0.5, waardoor het raster iets minder nadrukkelijk aanwezig is.
- Alle ringen liggen binnen de klasse cirkel. Deze bedekt de hele container, minus de padding. Hierdoor zit het middelpunt van de cirkel precies in het midden van de container. De overflow is hidden.
- De ringen zijn 'massieve', middengroene cirkels met een lichtgroene rand van 2px breed. Het omhullende vierkant wordt in het midden van de cirkel gezet en dan teruggeschoven naar de linker bovenhoek. De aspect-ratio staat op 1 om te zorgen dat de ringen rond blijven. De diameter van de afzonderlijke ringen wordt voor elke ring in een aparte klasse ingesteld.
- De achtergrond van de draaier is gemaakt met background-image, met een conische gradiënt. De kleur verloopt van transparant naar lichtgroen met opacity:0.8 over de eerste 250°, daarna naar lichtgroen met opacity:0.5 tot 359° en daarna naar wit tot 360°. De draaier is daardoor een witte lijn van één pixel breed, die vanuit het midden naar de rand van cirkel loopt. De animatie gaat via keyframes.
- Alle CSS-eigenschappen binnen de container hebben pointer-events:none;. Hierdoor reageert de radar niet op
de muis en ook niet op aanraking.
- Toepassen in je eigen site
- Download de .zip-file en pak hem uit. Je hebt meteen een werkend voorbeeld. Eventueel hernoem je de file html794a.htm naar index.html.
- Om de animatie uit te schakelen kun je JavaScript gebruiken om de innerHTML van de container 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>).
<style>
body {
background:#fafafa;
display:flex;
align-items:center;
justify-content:center;
height:100vh;
}
:root {
--dGroen:#022d16;
--mGroen:#054d2e;
--lGroen:0,255,0;
}
#container {
width:300px; height:300px;
background-color:var(--dGroen);
padding:25px;
box-sizing:border-box;
position:relative;
}
#container:after {
pointer-events:none;
content:"";
position:absolute;
width:100%; height:100%;
top:0; left:0;
background-size:50px 50px;
background-repeat:repeat;
background-image:linear-gradient(to right, rgb(var(--lGroen)) 1px, transparent 1px),
linear-gradient(to bottom, rgb(var(--lGroen)) 1px, transparent 1px);
opacity:0.5;
}
.cirkel {
pointer-events:none;
width:100%; height:100%;
border-radius:50%;
overflow:hidden;
position:relative;
}
.ringen {
pointer-events:none;
width:100%; height:100%;
background-color:var(--mGroen);
position:absolute;
}
.ringen > * {
border-radius:50%;
border:2px solid rgb(var(--lGroen));
box-sizing:border-box;
position:absolute;
top:50%; left:50%;
transform:translate(-50%,-50%);
aspect-ratio:1;
}
.ring-0 { width:100%; }
.ring-1 { width: 80%; }
.ring-2 { width: 60%; }
.ring-3 { width: 40%; }
.ring-4 { width: 20%; }
.draaier {
pointer-events:none;
width:100%; height:100%;
background: conic-gradient(transparent 0deg,
rgba(var(--lGroen), 0.5) 250deg,
rgba(var(--lGroen), 0.8) 359deg,
white);
position:absolute;
animation:draai infinite linear 3s;
}
@keyFrames draai {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
</style>
(Zet dit in de <BODY>)
div id="container">
<div class="cirkel">
<div class="ringen">
<div class="ring-0"></div>
<div class="ring-1"></div>
<div class="ring-2"></div>
<div class="ring-3"></div>
<div class="ring-4"></div>
</div>
<div class="draaier"></div>
</div>
</div>
Downloaden:
Druk op de knop:
File: voorb794.zip, 1135 bytes.
