Ben's Hobbyhoekje -- Progress-bar met knipperende LED's

Progress-bar met knipperende LED's

Er zijn websites die veel zaken tonen die van andere servers moeten komen. Als voorbeeld kun je denken aan sites die geld verdienen met het tonen van veel en grote advertenties. Zo'n site heeft wel even nodig om te laden. Dan is het verstandig om iets te maken waar gebruiker aan kan zien dat er iets gebeurt. Dat voorkomt dat de gebruiker weggaat voordat de pagina geladen is.

Op deze pagina wordt getoond hoe je zoiets kunt doen. Het voorbeeld toont een progress-bar (of laadbalk) die bestaat uit knipperende puntjes, die ook nog eens van kleur veranderen. Het zouden led-lampjes kunnen zijn.
De code kun je downloaden om zelf te gebruiken.

Toon het voorbeeld

Dit verhaal is een bewerking van code bij een artikel in Webdesigner Magazine 99 (november 2017), pag. 14 e.v. Het oorspronkelijke script is niet meer beschikbaar op internet. Een auteur staat niet bij het artikel genoemd.
Dit blad wordt sinds eind november 2017 niet meer gemaakt.
De code van het voorbeeld kun je downloaden om zelf mee aan de slag te gaan.

Er worden twee items besproken:
1. De werking van het script.
2. Toepassen in je eigen site.
De werking van het script
Dit is bij uitstek geschikt als openingspagina voor een site met diverse onderwerpen.
De code bestaat uit HTML en JavaScript (in het document) en CSS (in de file styles.css).
De content van de pagina is in eerste instantie verborgen. De laadbalk heeft de zelfde kleur als de achtergrond en is daardoor niet zichtbaar, behalve het woord Loading...
De laadbalk zelf bestaat uit twee lagen:
º De onderste laag bevat de knipperende kleuren. Bij het laden van de pagina wordt deze steeds breder.
º De bovenste laag is een soort 'gaas' waardoor de kleuren zichtbaar zijn. Zo wordt de illusie van een reeks knipperende LED-lampjes gemaakt.
Als de laadbalk de rechterkant van het scherm heeft bereikt begint die overnieuw. Zodra de pagina is geladen wordt de laadbalk verborgen en wordt de content zichtbaar gemaakt.
In het voorbeeld loopt de laadbalk in 7 seconden vol. Het "laden" van de pagina duurt echter 10 seconden. Daardoor zie je de laadbalk overnieuw beginnen en stopt even daarna.
HTML
De HTML in de <body> bestaat uit twee blokken:
• de laadbalk. Dat is een <p>-tag met het id waitPlease. Deze bevat alleen de tekst Loading.... Dat is er een <div>-tag met het id loading. Deze bevat alleen twee lege <span>-tags waar de feitelijke laadbalk in wordt opgebouwd.
• de content. Dat is de tag <main> met alles wat zich daar binnen bevindt. Deze tag heeft geen id. Het is de enige <main>-tag binnen de <body>.
CSS
Omdat de laadbalk is geschreven voor voor een schermvullende website, begint de CSS met een eenvoudige reset.
De afmetingen worden op 100vw en 100vh gezet, dat betekent: 100% van de breedte en 100% van de hoogte. De v staat hier voor viewport, dat is het deel van het scherm waar het document zichtbaar is.
Verder worden de binnen- en buitenmarges op nul gezet, wordt de achtergrondkleur ingesteld en worden het type en de kleur van de letters bepaald.
display: block is ingesteld om het te laten werken met Internet Explorer en om in een later stadium het blok met het ident loading te kunnen verbergen.
overflow: hidden zorgt ervoor dat er geen hinderlijke scrollbars zijn.
Nu wordt eerst de main-sectie van het document behandeld. Bij het laden van de pagina staat de opacity op 0. Zodra de body de klasse loaded krijgt, wordt de opacity op 1 gezet. Dat gebeurt vloeiend, in 2 sec.
De div met klasse kop (binnen main) wordt gebruikt voor de tekst 'Welkom op mijn site'. De overige content zit in een div, ook binnen main. Deze is gepositioneerd op 25vh van boven, dat betekent in dit geval: op 25% van de hoogte van het browser-window.
Nu is de laadpagina aan de beurt. Zodra de body de klasse loaded heeft gekregen, worden de blokken met de idents loading en waitPlease binnen body.loaded onzichtbaar gemaakt met display: none.
Het blok met het ident waitPlease wordt apart gehouden van de laadbalk. Om te zorgen dat het precies boven de laadbalk uitkomt, is het op z-index: 1 gezet (alle andere onderdelen hebben per default z-index: 0; de lekst 'Loading...' zweeft dus boven de laadbalk). Het ligt net als de laadbalk zelf op 45vh van boven. Het is netjes in de balk uitgelijnd door de lettergrootte en de regelhoogte goed te kiezen.
De laadbalk zelf zit in het blok met id="loading". Voor alle elementen binnen dat blok geldt dat ze op 45vh van boven liggen, helemaal links zijn gepositioneerd en dat ze 70px hoog zijn.
Het eerste element binnen #loading, (= de eerste lege span-tag in de HTML) is de gekleurde achtergrond. Dit is een kleurverloop (van blauw via groen, rood en oranje naar geel). Deze heeft aanvankelijk een breedte van nul, maar wordt door de animatie loading in 7 seconden naar de volle breedte van het scherm gebracht. Daarbij verandert de helderheid elke 0.5 seconde verminderd tot de helft (animatie flash), wat het knippereffect geeft.
De twee animaties zijn gemaakt met @keyframes en lopoen oneindig door.
Het tweede element binnen #loading, (= de tweede lege span-tag in de HTML) is het raster dat over de balk met het kleurverloop ligt. Dat heeft alleen een achtergrond dat hier onder is beschreven. Omdat de achtergrondkleur van de pagina hetzelfde is als de kleur van het raster zie je dat dus niet.
Om de laadbalk zo te maken dat het op LED-verlichting lijkt is er een overlappend patroon nodig. In het voorbeeld is het patroon hier rechts gebruikt (5× vergroot).
In het voorbeeld heeft de rand van het patroon dezelfde kleur als de achtergrond van de pagina. Dat geeft in dit geval het beste resultaat.
In het transparante middendeel verschijnt de kleuren-gradient.
Het patroon is gemaakt met de website www.patternify.com. Met deze site maak je een .png-bestand van maximaal 10×10 pixels. Je kopieert het van de site in Base64 codering. Dit kun je zo in de background:url() function van de CSS plakken.
Verderop deze pagina staat nog wat uitleg over het gebruik van patternify.com.
JavaScript
Het script begint met de declaratie van de variabele duration. Dit is de geschatte tijd die de pagina nodig heeft om te laden.
Het JavaScript verzorgt het omschakelen van het laadscherm naar de content. Dat gebeurt als de pagina is geladen. Daarvoor is er een event-listener gemaakt voor de gebeurtenis load.
Er is een hulp-variabele loaded. Deze heeft aanvankelijk de waarde null. Als de pagina is geladen wordt deze door de event-listener op true gezet.
Als loaded een andere waarde heeft dan null, wordt de function loadListener() uitgevoerd.
De function loadListener geeft aan de <body> de klasse loaded. Dat is is voor de CSS het sein om het laadscherm te verbergen en de content zichtbaar te maken.
Als het laden van de pagina is begonnen wordt er een (anonieme) function gestart die kijkt of loaded de waarde true heeft gekregen. Als dat het geval is wordt loadListener() aangeroepen.
Met window.setTimeout wordt de uitvoering gedurende duration seconden uitgesteld. Dit werkt ook als val om eventueel ontsporen van het script op te vangen.
Het maken van het LED-patroon
De werkwijze met de site www.patternify.com heeft wel wat toelichting nodig. Als je de site opent zie je links boven het 'canvas'. Dat is maximaal 10×10px groot. Aanvankelijk staat dat op 5×5px. Je verandert dat door met de muis op de linealen links en boven te klikken.
Je bent niet gebonden aan een vierkant. Rechthoekig kan ook.
De achtergrondkleur van het canvas is transparant. Op de site is dat de witte kleur.
Het niet-actieve deel van het canvas is lichtgrijs gekleurd.
Er is een beperkte set teken-gereedschappen: Undo, pencil (je tekent pixel voor pixel) en erase. Er zijn ook een kleurenkiezer en een eye-dropper, die helaas alleen binnen het canvas werkt.
De kleurenkiezer bedien je door het cirkeltje linksonder in het gekleurde vierkant te verslepen met de muis. Je kunt ook opacity instellen.
Er zijn een paar voorbeeld-patronen, die je kunt gebruiken als startpunt voor je eigen creaties.
Je kunt de gemaakte .png downloaden, daarvoor heeft de pagina een knop. Het bestandje komt in de standaard download-map van je browser, met de naam download. Je moet zelf de extensie .png toevoegen. De gemaakte .png-bestandjes zijn opvallend klein: 124 bytes voor het patroon dat in het voorbeeld op deze pagina wordt gebruikt.
Een ander optie is om het .png-bestand gecodeerd met Base64 direct met Copy-Paste in de CSS van je pagina te zetten.
Toepassen in je eigen site
Download de .zip-file en pak hem uit. Hernoem de file html595a.htm naar bijvoorbeeld index.html. Je hebt nu, afgezien van de foto's, een werkend voorbeeld.
Maak een schatting van de laadtijd van je webpagina. Als die bijvoorbeeld ongeveer 5 seconden is, zet je duration een beetje hoger, bijvoorbeeld 6 seconden. Dan zal er, totdat de pagina is geladen en het load-event wordt afgevuurd, er steeds beweging op het scherm te zien zijn.
Vervang desgewenst de achtergrond van de bovenste laag van de laadbalk (de Base64-figuur) door een andere vorm. Zie de beschrijving eerder in dit verhaal hoe je dat aanpakt.
Pas de opmaak van de pagina aan aan je eigen wensen. Dat doe je door de HTML van de <main> aan te passen en/of de CSS uit veranderen. Laat Het JavaScript zoveel mogelijk ongemoeid.

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" media="screen" href="styles.css">
<script>
var duration = 7;
var loaded = null;
var loadListener = function(){
document.body.className += " loaded";
}
window.setTimeout(function(){
if(loaded == true)loadListener();
},duration*1000);

window.addEventListener("load",function(){
if(loaded == null)loaded = true;
else loadListener();
});
</script>

(Dit is de code van de <BODY>).

<p id="waitPlease">Loading...</p>
<div id="loading">
<span></span>
<span></span>
</div>
<main>
<div class="kop">Welkom op mijn site</div>
<div>
<img src="foto-1.jpg" alt="Molen">
<img src="foto-2.jpg" alt="Paddenstoel">
<img src="foto-3.jpg" alt="Roos">
<img src="foto-4.jpg" alt="Hoogspanningsmast">
<img src="foto-5.jpg" alt="Parkje">
<p>Een gebeuren vol met HTML, JavaScript, CSS, Foto's
en Fractals.</p>
</div>
</main>

Downloaden:

Druk op de knop: File: voorb595.zip, 1697 bytes.