Bezig met laden... Animatie in Vanilla JavaScript

Introductie

Bij het ontwikkelen van websites en webapplicaties kan het opnemen van een laadanimatie de gebruikerservaring aanzienlijk verbeteren door te communiceren wat er aan de hand is. Dit boeit gebruikers en houdt hun aandacht vast tijdens het laden van de inhoud, en het helpt gebruikers te begrijpen wat er aan de hand is in plaats van ze te laten raden.

In deze handleiding bekijken we hoe u Vanilla JavaScript kunt gebruiken om een ​​laadanimatie te maken. We zullen werken met beide geanimeerde GIF en door CSS gemaakte laders en zie hoe u ze in twee scenario's kunt gebruiken: inhoud laden bij het starten van een app/website of inhoud opvragen bij een externe API.

Een lader maken

Er zijn verschillende manieren waarop mensen hun lader willen weergeven. Voor het doel van deze handleiding bouwen we een lader die het hele scherm beslaat en verdwijnt wanneer de pagina klaar is met laden. Allereerst moeten we een tijdelijke HTML-pagina maken:

<div class="loader-container"> <div class="spinner"></div>
</div> <div class="main-content"> <h1>Hello World!</h1> <p> This is a demo Project to show how to add animated loading with Vanilla JavaScript. </p> <div class="buttons"> <button class="btn"><a href="#">Read Article</a></button> <button class="btn get-quote">Generate Quote</button> </div> <div class="quote-section"> <blockquote class="quote"> If you do not express your own original ideas, if you do not listen to your own being, you will have betrayed yourself. </blockquote> <span class="author">- Rollo May</span> </div>
</div>

Voor de eenvoud hebben we er maar twee <div> blokken - een voor de lader en een voor de inhoud van de website.

Zoals eerder vermeld, kan het laadpictogram een ​​zijn: GIF, een geanimeerd pictogram gemaakt met CSS of iets anders. Het belangrijkste om te onthouden is dat dezelfde aanpak van toepassing is op elk type laadpictogram dat we gebruiken.

Maak een lader met een GIF

A GIF is een geanimeerd pictogram dat voor onbepaalde tijd speelt. Een keer we hebben onze gemaakt GIF, we stylen de loader-container div die het zal huisvesten. Er zijn talloze manieren om het te stylen! Hier kun je heel creatief aan de slag. We voegen gewoon een laag toe met een zwarte achtergrond bovenop onze pagina naast het pictogram, om de ladende inhoud te "blokkeren":

.loader-container { width: 100%; height: 100vh; position: fixed; background: #000 url("https://media.giphy.com/media/8agqybiK5LW8qrG3vJ/giphy.gif") center no-repeat; z-index: 1;
}

Wanneer we onze webpagina nu laden, zien we een zwarte achtergrond met een GIF laden in het midden van het scherm, vergelijkbaar met dit:

Op dit moment zijn we klaar om het laden te implementeren met JavaScript. Maar laten we ook eens kijken hoe we door CSS gemaakte animatie kunnen gebruiken in plaats van a GIF, waarvoor geen extra bestand nodig is om te importeren.

Loader maken met CSS

We zullen precies hetzelfde pictogram maken met CSS. Onthoud dat we een extra div hebben gemaakt (spinner) binnen in de loader-container div en dat is wat we zullen gebruiken om het pictogram weer te geven:

.spinner { width: 64px; height: 64px; border: 8px solid; border-color: #3d5af1 transparent #3d5af1 transparent; border-radius: 50%; animation: spin-anim 1.2s linear infinite;
} @keyframes spin-anim { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); }
}

De bovenstaande code helpt ons een CSS-laderpictogram te maken waarvan we nu de loader-container div kunnen gebruiken om te centreren en de zwarte achtergrond toe te voegen zoals we eerder deden:

.loader-container { width: 100%; height: 100vh; display: flex; justify-content: center; align-items: center; position: fixed; background: #000; z-index: 1;
}

Nu we de twee beschikbare soorten geanimeerde laders hebben gezien, gaan we JavaScript gebruiken om te bepalen wanneer deze laadanimatie verschijnt en verdwijnt.

Een laadanimatie implementeren met JavaScript

JavaScript stelt ons in staat om onze HTML-structuur te manipuleren en de . te verwijderen of te verbergen loader-container die momenteel wordt weergegeven voor de inhoud van de website. Er zijn twee belangrijke benaderingen om dit te bereiken - gewoon het verbergen van de loader-container, of helemaal verwijderen.

Welke benadering u ook kiest, de eerste stap is het gebruik van de querySelector() or getElementById() om de terug te halen loader-container zodat we het kunnen manipuleren:

const loaderContainer = document.querySelector('.loader-container');

Ten tweede gebruiken we de eventListener om te luisteren naar een load gebeurtenis, zodat het de callback-functie aanroept wanneer de load gebeurtenis vindt plaats:

window.addEventListener('load', () => { // ...
});

Het laden... element verbergen

De meest gebruikelijke aanpak is om de loader-container Met display: none zodat het verdwijnt wanneer de inhoud volledig is geladen.

HTML DOM stelt ons in staat om de stijl van onze HTML-elementen van JavaScript te veranderen, en de onderstaande code geeft aan dat we de container van de lader instellen display eigendom aan none zodat het niet verschijnt zodra de load is succesvol:

window.addEventListener('load', () => { loaderContainer.style.display = 'none';
});

Als alternatief kunt u een aparte klasse maken die geldt voor display: none eigendom:

.loader-container-hidden { display: none;
}

En gebruik vervolgens classList.add() om de klas toe te voegen aan de loader-container element:

window.addEventListener('load', () => { loaderContainer.classList.add('loader-container-hidden');
});

Het laadelement verwijderen

Tot nu toe hebben we een belangrijke methode gezien waarmee we onze loader-container, wat inhoudt dat het element nog steeds aanwezig is, maar verborgen. Een andere optie is om het element volledig te verwijderen:

window.addEventListener('load', () => { loaderContainer.parentElement.removeChild(loaderContainer);
});

Op dit punt, wanneer we onze pagina laden, wordt de laadanimatie weergegeven totdat de inhoud van de pagina volledig is geladen.

Laadanimatie implementeren bij het aanvragen van externe inhoud van een API

Het ophalen van inhoud van een externe API is een andere situatie waarvoor mogelijk een lader nodig is. Dit type inhoud kan enige tijd duren om op te halen en weer te geven, dus het is het beste om een ​​lader toe te voegen.

Laten we in ons geval proberen een offerte te krijgen van a citaten-API met behulp van de ingebouwde Fetch API. Merk op dat de HTML die we aan het begin van dit artikel hebben gemaakt een “Citaat genereren” knop. Het enige wat we hoeven te doen is de document.querxySelector() methode om het element te krijgen en een callback-functie te maken om a . af te handelen click gebeurtenis die wordt geactiveerd wanneer de gebruiker op de knop klikt:

const getQuoteBtn = document.querySelector('.get-quote'); getQuoteBtn.addEventListener('click', () => { fetch('https://api.quotable.io/random') .then((response) => { return response.json(); }) .then((data) => { const quote = document.querySelector('.quote'); const author = document.querySelector('.author'); quote.innerHTML = data.content; author.innerHTML = data.author; });
});

Dit zal ons met succes helpen bij het verkrijgen van willekeurige citaten in onze applicatie, maar we zouden graag een animatie laden zodat de gebruiker weet dat we inhoud verwachten. Om dit te bereiken, zullen we twee methoden maken, één om de . weer te geven loader-container en de andere om het te verbergen:

const displayLoading = () => { loaderContainer.style.display = 'block';
}; const hideLoading = () => { loaderContainer.style.display = 'none';
};

Op dit punt kunnen we eindelijk de laadanimatie opnemen in de callback-functie. Wanneer het ophalen begint, zal de callback-functie de laadanimatie weergeven en verbergen zodra de gegevens zijn ontvangen:

getQuoteBtn.addEventListener('click', () => { displayLoading(); fetch('https://api.quotable.io/random') .then((response) => { return response.json(); }) .then((data) => { hideLoading(); const quote = document.querySelector('.quote'); const author = document.querySelector('.author'); quote.innerHTML = data.content; author.innerHTML = data.author; });
});

Conclusie

In dit artikel hebben we geleerd hoe je vanilla JavaScript kunt gebruiken om een ​​laadanimatie te maken en deze op de juiste manier weer te geven. We hebben verschillende benaderingen overwogen om dit te bereiken en hebben een aantal verschillende use-cases bekeken voor de laadanimatie. We hebben ervoor gekozen om de draaiende cirkel als een lader te gebruiken, maar je kunt deze op elke gewenste manier veranderen - voel je vrij om je eigen cirkel te maken GIF of CSS geanimeerde lader.

• Coinsmart. Europa's beste Bitcoin- en crypto-uitwisseling.
• Platoblockchain. Web3 Metaverse Intelligentie. Kennis versterkt. GRATIS TOEGANG.
• CryptoHawk. Altcoin-radar. Gratis proefversie.
• Bron: https://stackabuse.com/loading-animation-in-vanilla-javascript/