Adapter un loader (CSS) à mon leader existant.
Résolu
lamontange
Messages postés
130
Date d'inscription
Statut
Membre
Dernière intervention
-
lamontange Messages postés 130 Date d'inscription Statut Membre Dernière intervention -
lamontange Messages postés 130 Date d'inscription Statut Membre Dernière intervention -
Bonjour,
J'ai un loader qui fonctionne dont voici les CSS :
le JS :
et le HTML :
Comment faire pour adapter ce loading ?
https://codepen.io/worodhazam/pen/NWyxRYZ
J'ai bien essayé... sans succès :(
Merci beaucoup,
LM
J'ai un loader qui fonctionne dont voici les CSS :
#loading { position: fixed; display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; top: 0; left: 0; opacity: 1; background-color: #fff; z-index: 999999; } #loading-image { z-index: 9999999; }
le JS :
<script> $(window).on('load', function (){ $('#loading').hide(); }) </script>
et le HTML :
<div id="loading"> <img id="loading-image" src="imgs/LoaderCarre.gif" alt="Loading..." /> </div>
Comment faire pour adapter ce loading ?
https://codepen.io/worodhazam/pen/NWyxRYZ
J'ai bien essayé... sans succès :(
Merci beaucoup,
LM
Configuration: Macintosh / Chrome 101.0.4951.64
A voir également:
- Adapter un loader (CSS) à mon leader existant.
- Windows loader - Télécharger - Gestion de fichiers
- Un périphérique qui n'existe pas a été spécifié - Forum Matériel & Système
- Impossible d'afficher le rapport de tableau croisé dynamique sur un rapport existant - Forum Bureautique
- Comment créer un groupe whatsapp à partir d'un groupe existant - Guide
- Excel adapter taille cellule au texte ✓ - Forum Excel
2 réponses
Bonjour,
Je ne comprends pas le problème. Tu nous montres un code qui fonctionne pour toi, puis un autre code qui fonctionne sur codepen...
Qu'as-tu essayé ? Tu veux reproduire le résultat de codepen ?
Bonjour Grandasse,
Oui, je voulais reproduire le codepen.
J'ai réussi avec ces CSS :
#loader-wrapper { position: fixed; z-index: 9999; top: 0; right: 0; bottom: 0; left: 0; background: #000; display: flex; justify-content: center; align-items: center; opacity: 1; transition: 1s all ease-in-out; overflow-y: visible !important; } #loader-wrapper.hide { opacity: 0; pointer-events: none; z-index: -1; } #chargement { position: relative; color: white; box-sizing: border-box; margin: 0; } #chargement span { font-size: 3vw; letter-spacing: 5px; text-transform: uppercase; line-height: 1; mix-blend-mode: difference; } #chargement::before { content: ""; position: absolute; left: 0; top: 0; width: 100px; height: 100%; background-color: white; animation: move 2s linear infinite; } @keyframes move { 0%, 100% { left: 0; } 50% { left: calc(100% - 100px); } }
Désolé d'avoir laissé la question en suspens
Bonne journée,
LM