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
- Clé USB : un périphérique qui n'existe pas a été spécifié - Forum Clé USB / Carte mémoire
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