Loading spinner - code modifiable ?

[Kaehlyth]

Détails techniques
Version du forum : phpBB2
Poste occupé : Administrateur
Navigateur(s) concerné(s) : Internet Explorer, Autre
Capture d'écran du problème :
Voir l'image :

Personnes concernées par le problème : Tous les utilisateurs
Lien du forum :


Description du problème

Bonsoir à tous et toutes !

Je viens vers vous suite à la découverte d'un forum tristement fermé qui m'a intrigué. Ce dernier possède une sorte de page de chargement en rgba qui fait tourner un spinner de loading.

J'ai trouvé l'effet totalement surprenant.
https://tahncelhanrpg.forumactif.com/forum

Cependant, après recherche ici, je ne.voisnquun code qui ne correspond pas du tout à ce que je souhaiterai et qui, en plis, est difficilement compréhensible.

Savez vous comment personnaliser similairement cette chose ?

Cordialement

[Oka.mi]

Bonjour,

Il s'agirait de :

1. installer l'élément de chargement voulu dans le overall_header, juste après la balise d'ouverture body.
   Sur le forum montré, il y a un contenant avec plusieurs contenus (triangles, courbe, droite...) qui forment l'animation finale.
   
2. animer les éléments installés avec du CSS. Pour cela difficile de vous aider sans savoir ce que vous entendez par "similaire", mais vous pouvez consulter les multiples tutoriels d'animation CSS disponibles sur internet, à commencer par le plus basique vous concernant :
   https://www.w3schools.com/howto/howto_css_loader.asp
   Ou si vous voulez vous contenter de quelque chose de tout fait : https://loading.io/css/
   
3. installer un JavaScript qui retirera l'élément de chargement une fois la page chargée :
   https://developer.mozilla.org/fr/docs/Web/API/Window/load_event
   https://api.jquery.com/fadeout/

[Kaehlyth]

Oh, c'est génial ce que vous m'avez proposé pour faire soi-même le spinner.
Cependant, le script pour l'arrêt, j'ai un peu de mal avec l'anglais, est-ce qu'il s'agit de cela ?

Code:

<script src="Public/JavaScript/functions.js"></script>
    <script src="Public/JavaScript/functionsFlatpickr.js"></script>
    <script>
    document.onreadystatechange = function() {
        if (document.readyState !== "complete") {
            document.getElementById("loading").style.display="block";
            document.getElementsByTagName("header")[0].style.display="none";
            document.getElementById("scrollable").style.display="none";
        } else {
            document.getElementById("loading").style.display="none";
            document.getElementsByTagName("header")[0].style.display="block";
            document.getElementById("scrollable").style.display="block";
        }
    }
    </script>

[Oka.mi]

console.log, c'est pour afficher quelque chose dans votre console (accessible avec la touche F12).
Il faudra remplacer cette ligne par quelque chose comme

Code:

$('#loadspinner').fadeOut();

en imaginant que #loadspinner est l'id de l'élément de chargement que vous aurez créé.

Notez d'ailleurs que si vous passez par les modules JavaScript, il faut vous défaire des balises <script> qui ne sont pas nécessaires dans ce cas (au contraire elles empêcheront le script de fonctionner).

[Kaehlyth]

Je met directement le CSS et le script qui touche un élément sur mon HTML. ça me permet de me retrouver et d'avoir tout dans un "pack".
Merci, c'est résolu.