Bonjour à tous,
je dois réaliser dans le cadre d'une formation un site suivant une maquette.
Je me heurte à un pb que je n'arrive pas à résoudre depuis des jours: lors du chargement de la page d’accueil, un loading spinner doit apparaître puis disparaître pour laisser la place à la page d’accueil; Pour créer le spinner, pas de pb. Malgré men nombreuses tentatives, j'arrive au résultat suivant:
le loading spiner tourne avec la page d’accueil 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 disparait pas...
ce que je souhaite est que à l’ouverture de la page, seul le spinner tourne pendant x secondes puis disparait pour laisser apparaître la page d’accueil.
merci pour votre aide car j'avoue botter en touche.
<body class="body">
<div class="parent__spinner">
<div class="loading__spiner"></div>
</div>
@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;
}
je dois réaliser dans le cadre d'une formation un site suivant une maquette.
Je me heurte à un pb que je n'arrive pas à résoudre depuis des jours: lors du chargement de la page d’accueil, un loading spinner doit apparaître puis disparaître pour laisser la place à la page d’accueil; Pour créer le spinner, pas de pb. Malgré men nombreuses tentatives, j'arrive au résultat suivant:
le loading spiner tourne avec la page d’accueil 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 disparait pas...
ce que je souhaite est que à l’ouverture de la page, seul le spinner tourne pendant x secondes puis disparait pour laisser apparaître la page d’accueil.
merci pour votre aide car j'avoue botter en touche.
<body class="body">
<div class="parent__spinner">
<div class="loading__spiner"></div>
</div>
@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;
}