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   -
Bonjour,
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

2 réponses

Grandasse_ Messages postés 924 Date d'inscription   Statut Membre Dernière intervention   597
 

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 ?


1
lamontange Messages postés 130 Date d'inscription   Statut Membre Dernière intervention   6
 

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

0