Barre de chargement d'une page
ClemLya Le 9 novembre 2020 à 18:47
Bonjour, Je développe depuis peu mais je suis en train de créer mon site web. Je m'interoge de plus en plus sur la manière de faire patienter les personnes au chargement d'une page. J'ai testé et aussi créé des loaders mais j'aimerais avoir une barre de progression de chargement de la page, exactement comme sur ce site ! J'ai cherché un peu partout mais je ne trouve pas ce que je cherche précisément. Merci d'avance.
PrimFX Le 21 novembre 2020 à 22:00
Hello @ClemLya,
Tout dépend de ce que tu cherches à faire avec cette barre de progression et du degré de précision nécessaire.
Pour le chargement d'une page, une idée simple et efficace est d'utiliser non pas une progress bar (qui nécessite généralement de connaître le pourcentage de chargement de la page pour faire avancer la barre) mais plutôt un loader/spinner, qui tourne tant que le chargement est en cours et jusqu'à ce qu'il soit terminé.
Il existe une pléthore de librairies qui permettent de créer des progress bars, spinners et loaders en tous genres, par exemple :
- progressbar.js
- loading.js
- des frameworks plus complets comme Bootstrap par exemple
- etc.
Si tu veux commencer simple, c'est-à-dire sans avoir à te soucier du pourcentage de chargement d'une page ou d'un élément, je peux te recommander l'utilisation d'un événement JS comme par exemple load qui t'indiquera que la page est chargée. Il n'y a alors plus qu'à afficher un loader (quelconque) et le faire disparaître dès l'événement load reçu, avec un code comme par exemple :
$(window).bind("load", function () {
$('#ton-loader').fadeOut(100);
});L'exemple est ici donné en jQuery (Source : Stack Overflow) mais il est également possible d'obtenir un comportement similaire en Vanilla JS 😉
En espérant avoir pu te donner une piste de réflexion !
A bientôt,
Boris ('PrimFX')
ClemLya Le 24 novembre 2020 à 18:06
Bonjour @PrimFX, merci de m'avoir répondu, j'ai finalement trouvé une solution pour faire un loader avec une barre de progression sans JS et sans tenir compte du chargement de la page mais uniquement avec un décompte de secondes.
J'ai pour cela utilisé la propriété @keyframes. Mon code :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
.progress-container-chargement {
width: 100%;
height: 2px;
background: transparent;
transition-timing-function: ease-out;
}
.progress-bar-chargement {
height: 3px;
background: #fc0000;
animation-duration: 2s;
animation-name: bar-de-chargement;
opacity: 0;
border-radius: 12px;
transition-timing-function: ease-in;
}
.header-bar-chargement {
position: fixed;
top: 0;
z-index: 6;
width: 100%;
background-color: transparent;
transition-timing-function: ease-out;
}
@keyframes bar-de-chargement {
1% { width: 0; opacity: 0; display: none; }
2% { opacity: 1; display: block; }
30% { opacity: 1; }
75% { width: 75%; }
76% { width: 76%; }
77% { width: 77%; }
78% { width: 78%; }
79% { width: 79%; }
80% { width: 80%; }
81% { width: 81%; }
83% { width: 82%; }
82% { width: 83%; }
84% { width: 84%; }
85% { width: 85%; }
86% { width: 86%; }
87% { width: 87%; }
96% { width: 96%; transition-timing-function: ease-out; opacity: 1;}
100% { width: 100%; opacity: 0; display: none; }
}
.hidden{
opacity: 0;
}
</style>
</head>
<body>
<div class="header-bar-chargement" id="loadbar_conatainer">
<div class="progress-container-chargement ">
<div class="progress-bar-chargement " id="loadbar"></div>
</div>
</div>
</body>
</html>
Je préfère garder les loaders/spinners pour les chargements à l'intérieur de mes pages comme par exemple un formulaire volumineux contenant des images.
Cordialement
