Loading spinner - code modifiable ?

2 participants

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Loading spinner - code modifiable ?

Message par Kaehlyth Jeu 5 Mai 2022 - 1:08

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
Kaehlyth

Kaehlyth
***

Messages : 147
Inscrit(e) le : 27/04/2022

Voir le profil de l'utilisateur https://albastrya.bbactif.com/
Kaehlyth a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Loading spinner - code modifiable ?

Message par Oka.mi Jeu 5 Mai 2022 - 15:02

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/


Loading spinner - code modifiable ? 1213Donnez un titre explicite Loading spinner - code modifiable ? VTzsyWB à votre sujet pour améliorer son référencement

Remerciez Loading spinner - code modifiable ? 976083691 le message qui vous a aidé pour le mettre en évidence

Cochez résolu lorsque votre problème est résolu pour faciliter le travail des modérateurs

L'aide par MP Loading spinner - code modifiable ? FsAeGeb n'est pas autorisée pour que celle-ci puisse bénéficier au plus grand nombre
Oka.mi

Oka.mi
Aidactive
Aidactive

Messages : 2707
Inscrit(e) le : 06/01/2011

Voir le profil de l'utilisateur https://deus-academia.forumactif.com/
Oka.mi a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Loading spinner - code modifiable ?

Message par Kaehlyth Jeu 5 Mai 2022 - 21:56

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>


Dernière édition par Kaehlyth le Jeu 5 Mai 2022 - 22:13, édité 1 fois
Kaehlyth

Kaehlyth
***

Messages : 147
Inscrit(e) le : 27/04/2022

Voir le profil de l'utilisateur https://albastrya.bbactif.com/
Kaehlyth a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Loading spinner - code modifiable ?

Message par Oka.mi Jeu 5 Mai 2022 - 22:03

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


Loading spinner - code modifiable ? 1213Donnez un titre explicite Loading spinner - code modifiable ? VTzsyWB à votre sujet pour améliorer son référencement

Remerciez Loading spinner - code modifiable ? 976083691 le message qui vous a aidé pour le mettre en évidence

Cochez résolu lorsque votre problème est résolu pour faciliter le travail des modérateurs

L'aide par MP Loading spinner - code modifiable ? FsAeGeb n'est pas autorisée pour que celle-ci puisse bénéficier au plus grand nombre
Oka.mi

Oka.mi
Aidactive
Aidactive

Messages : 2707
Inscrit(e) le : 06/01/2011

Voir le profil de l'utilisateur https://deus-academia.forumactif.com/
Oka.mi a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Loading spinner - code modifiable ?

Message par Kaehlyth Jeu 5 Mai 2022 - 22:23

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. Loading spinner - code modifiable ? 1f60a
Kaehlyth

Kaehlyth
***

Messages : 147
Inscrit(e) le : 27/04/2022

Voir le profil de l'utilisateur https://albastrya.bbactif.com/
Kaehlyth a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut

- Sujets similaires

Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum