page d'accueil après le loader

Par simonsays86, il y a 4 ans

Les bases HTML/CSS

Bonjour,
je souhaite sur une page d'accueil que, lorsque le loader s'arrête, la page d'accueil s'affiche.
Expliqué autrement, j'ai le loading spinner qui démarre et dure 5 secondes. A la fin de cette animation, je voudrais que 1:le overflow:hidden du body disparaisse, 2: que le "parent__spinner" passe en z-index:-1 et 3: que le loading spinner passe en display none, ce afin que la page d'accueil s'affiche.

ci dessous le dé bt du code html:
"<Body class="body">

    <div class="parent__spinner">
        <div class="loading__spiner"></div>
    </div>

    <header class="header__index">
        <div class="header__index__logo"><img src="images/logo/ohmyfood.png" alt="logo ohmyfood">
        </div>
        <div class="header__index__localisation">
                <i class="fas fa-map-marker-alt header__index__localisation__icone"></i><span class="header__index__localisation__texte">Paris, Belleville</span>
        </div>
        <div class="header__index__slogan">
            <div class="header__index__reservez"><p>Réservez le menu qui vous convient</p></div>
            <div class="header__index__decouvrez"><p>Découvrez des restaurants d'exception, sélectionnés par nos soins.</p></div>
            <div class="header__index__explorez"><button>Explorer nos restaurants</button></div>
        </div>
    </header>

"

ci-dessous le code css: "@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .parent__spinner{ position: absolute; top: 0; bottom: 0; left: 0; right: 0; background-color: white; z-index: 999; } .loading__spiner{ border: 20px solid white; border-top:20px solid #9356DC; border-bottom: 20px solid #FF79DA; border-radius: 50%; width:100px; height:100px; margin: auto; position:absolute; right:0; top:0; bottom:0; left:0; animation: spin 1.2s linear 5s; } .body { font-family: 'roboto'; overflow:hidden; }"

6 réponses

popotte, il y a 4 ans

Hello, faudra utiliser du JS pour ça, tu fais une fonction qui se déclenche après 5secondes pour faire disparaitre le loader

Pour ton overflow hidden du body tu peux le retirer, et ton parent-spinner tu peux le mettre en position fixed au lieux de absolute, ou alors tu laisses comme ça et tu retires l'attribut avec du JS

Voila en gros pas le choix faut passer par du js ^^

simonsays86, il y a 4 ans

merci mais il y a une contrainte, je ne dois pas utiliser javascript, que du css.
je suis preneur de tout conseil et pistes...
merci dans tous les cas.

simonsays86, il y a 4 ans

merci beaucoup

popotte, il y a 4 ans

De rien ;)

simonsays86, il y a 4 ans

Bonjour Popotte,
je reviens vers toi car je n'y arrive tjrs pas.
je redonne le code html:
"
<body class="body">

    <div class="parent__spinner">
        <div class="loading__spiner"></div>
    </div>"

    et le code css:

    @keyframes spin {

0% {
transform: rotate(0deg);
opacity:1;
}
100% {
transform: rotate(360deg);
opacity:0;
}
}

@keyframes fade {
0% {
opacity:1;
}
100% {
opacity:0;
visibility:hidden;
}
}

/loading ne marche pas/
.parent__spinner{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: white;
display:flex;
justify-content:center;
align-items: center;
z-index: 1000;
height: 100%;
width: 100%;
animation: fade 0.2s 3s forwards;
}
}

.loading__spiner{/création du loader/
border: 20px solid white;
border-top:20px solid $couleur-primaire;
border-bottom: 20px solid $couleur-secondaire;
border-radius: 50%;/arrondi des angles/
width:100px;
height:100px;
margin: auto;/placement milieu de page/
position:absolute;
right:0;
top:0;
bottom:0;
left:0;
animation: spin 1.2s linear 5s;
animation-fill-mode: forwards;
}"

le résultat n'est pas celui que je veux: le loading spiner tourne vaec la page d'acceuil affichée en arrière plan (alors que je ne veux que le spinner) puis au bout de 5 secondes, le spinner s'arrête mais ne disparâit pas...
ce que je souhaite est que à l'ouverure de la page, seul le spinner tourne pendant x secondes puis disparâit pour laissser apparaître la page d'acceuil.
merci pour ton aide.