Chargement… Animation en JavaScript Vanilla

Introduction

Lors du développement de sites Web et d’applications Web, l’inclusion d’une animation de chargement peut améliorer considérablement l’expérience utilisateur en communiquant ce qui se passe. Cela engage les utilisateurs et maintient leur attention lors du chargement du contenu, et cela aide les utilisateurs à comprendre ce qui se passe plutôt que de les laisser deviner.

Dans ce guide, nous verrons comment utiliser Vanilla JavaScript pour créer une animation de chargement. Nous travaillerons avec les deux animés GIFs et les chargeurs créés par CSS et découvrez comment les utiliser dans deux scénarios : charger du contenu au lancement de l'application/du site Web ou demander du contenu à une API externe.

Comment créer un chargeur

Les utilisateurs peuvent souhaiter afficher leur chargeur de différentes manières. Pour les besoins de ce guide, nous allons créer un chargeur qui couvrira tout l'écran puis disparaîtra une fois le chargement de la page terminé. Tout d’abord, nous devons créer une page HTML d’espace réservé :

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

Par souci de simplicité, nous n'avons que deux <div> blocs – un pour le chargeur et un pour le contenu du site Web.

Comme indiqué précédemment, l'icône de chargement peut être un GIF, une icône animée créée avec CSS, ou autre chose. La chose importante à retenir est que la même approche s’applique à tout type d’icône de chargement que nous utilisons.

Créer un chargeur à l'aide d'un GIF

A GIF est une icône animée qui joue indéfiniment. Une fois nous avons créé notre GIF, nous styliserons le loader-container div qui l'hébergera. Il existe de nombreuses façons de le styliser ! Vous pouvez être vraiment créatif ici. Nous allons simplement ajouter un calque avec un fond noir en haut de notre page à côté de l'icône, pour « bloquer » le contenu en cours de chargement :

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

Lorsque nous chargerons notre page Web maintenant, nous verrons un fond noir avec un GIF chargement au milieu de l'écran, semblable à ceci :

À ce stade, nous sommes prêts à implémenter le chargement à l’aide de JavaScript. Mais voyons également comment utiliser une animation créée en CSS au lieu d'un GIF, qui ne nécessite pas d'importation de fichier supplémentaire.

Créer un chargeur en utilisant CSS

Nous allons créer exactement la même icône avec CSS. N'oubliez pas que nous avons créé un div supplémentaire (spinner) à l'intérieur de loader-container div et c'est ce que nous utiliserons pour représenter l'icône :

.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); }
}

Le code ci-dessus nous aidera à créer une icône de chargeur CSS dont nous pouvons maintenant utiliser le div chargeur-conteneur pour centrer et ajouter le fond noir comme nous l'avons fait précédemment :

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

Maintenant que nous avons vu les deux types de chargeurs animés disponibles, utilisons JavaScript pour contrôler le moment où cette animation de chargement apparaît et disparaît.

Comment implémenter une animation de chargement avec JavaScript

JavaScript nous permet de manipuler notre structure HTML et de supprimer ou masquer le loader-container qui est actuellement affiché en face de le contenu du site Web. Il existe deux approches principales pour y parvenir : il suffit de cacher le loader-container, ou le supprimer complètement.

Quelle que soit l'approche que vous choisissez, la première étape consiste à utiliser le querySelector() or getElementById() pour récupérer le loader-container pour qu'on puisse le manipuler :

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

Dans un deuxième temps, nous utiliserons le eventListener écouter un load événement, de sorte qu'il appelle la fonction de rappel lorsque le load l'événement se produit :

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

Masquer l’élément de chargement…

L'approche la plus courante consiste à masquer le loader-container comprenant display: none afin qu'il disparaisse lorsque le contenu est complètement chargé.

HTML DOM nous permet de changer le style de nos éléments HTML à partir de JavaScript, et le code ci-dessous indique que nous définissons le conteneur du chargeur display propriété à none afin qu'il n'apparaisse pas une fois le load est réussi:

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

Alternativement, vous pouvez créer une classe distincte contenant display: none propriété:

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

Et puis d'utiliser classList.add() pour ajouter la classe au loader-container élément:

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

Suppression de l'élément de chargement…

Jusqu’à présent, nous avons vu une méthode majeure qui nous permet de cacher nos loader-container, ce qui implique que l'élément est toujours présent, mais caché. Une autre option consiste à supprimer entièrement l’élément :

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

À ce stade, lorsque nous chargeons notre page, l’animation de chargement sera affichée jusqu’à ce que le contenu de la page soit complètement chargé.

Implémentation du chargement d'une animation lors de la demande de contenu externe à partir d'une API

La récupération de contenu à partir d'une API externe est une autre situation qui peut nécessiter l'inclusion d'un chargeur. La récupération et l'affichage de ce type de contenu peuvent prendre un certain temps, il est donc préférable d'inclure un chargeur.

Dans notre cas, essayons d’obtenir un devis auprès d’un API de citations en utilisant l'API Fetch intégrée. Notez que le HTML que nous avons créé au début de cet article a un « Générer un devis » bouton. Tout ce que nous avons à faire est d'utiliser le document.querxySelector() méthode pour obtenir l'élément et créer une fonction de rappel pour gérer un click événement déclenché lorsque l'utilisateur clique sur le bouton :

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; });
});

Cela nous aidera à obtenir des devis aléatoires dans notre application, mais nous aimerions avoir un animation de chargement afin que l'utilisateur sache que nous attendons du contenu. Pour ce faire, nous allons créer deux méthodes, une pour afficher le loader-container et l'autre pour le cacher :

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

À ce stade, nous pouvons enfin intégrer l'animation de chargement dans la fonction de rappel. Lorsque la récupération commence, la fonction de rappel affichera l'animation de chargement et la masquera une fois les données reçues :

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; });
});

Conclusion

Dans cet article, nous avons appris à utiliser JavaScript Vanilla pour créer une animation de chargement et l'afficher de manière appropriée. Nous avons envisagé différentes approches pour y parvenir et examiné quelques cas d'utilisation différents pour l'animation de chargement. Nous avons choisi d'utiliser le cercle rotatif comme chargeur, mais vous pouvez le modifier comme bon vous semble – n'hésitez pas à créer le vôtre. GIF ou chargeur animé CSS.

• Coinsmart. Le meilleur échange Bitcoin et Crypto d'Europe.
• Platoblockchain. Intelligence métaverse Web3. Connaissance amplifiée. ACCÈS LIBRE.
• CryptoHawk. Radar Altcoins. Essai gratuit.
• Source : https://stackabuse.com/loading-animation-in-vanilla-javascript/