loader en css uniquement qui bloque les fonctionnalités de ma page

**Peebels** · 15/08/2023, 11h45

Bonjour à tous, je suis nouveau et heureux de découvrir ce forum.

J'ai un souci de loader, il apparait au dessus de ma page d'accueil , s'anime et disparait au bout de 3 secondes, seulement une fois la page accueil affichée, je ne peux rien faire aucun lien ne fonctionne.
Je le fais sans javascript.
Merci aux aidants

Voici mon

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<body>
    <div class="loader">
        <div class="loader_card">
            <div class="text">ohmyfood</div>
            <div class="spheres">
                <div class="sphere sphereone"></div>
                <div class="sphere spheretwo"></div>
                <div class="sphere spherethree"></div>
            </div>
        </div>
    </div>
 
    <!-- HEADER LOGO -->
    <header>
        <section class="logo">
            <h1 class="logo_title">SITE</h1>
        </section>
    </header>

Et voici mon code css en scss

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
.loader {
    background: linear-gradient(175deg, $primary 0%, $secondary 100%);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    height: 100vh;
    position: fixed;
	top: 0;
    width: 100%;
    animation: loader_animate 3500ms forwards;
    z-index: 1;
 
 
    &_card {
        display: flex;
        flex-direction: column;
        background-color: $greylight;
        gap: 16px;
        border-radius: 15px;
        filter: drop-shadow(0px 3px 15px rgba(0, 0, 0, 0.1));
        padding: 20px;
        animation: card_color 1000ms ease-in-out   forwards;
    }  
 
 
@keyframes card_color {
    0% {
        color: $light;
        opacity: 0;
    }
 
    100% {
        color: $dark;
        opacity: 1;
 
    }
}
 
@keyframes loader_animate {
  99%{
    opacity: 1;
}
 
    100% {
       opacity:0;
 
    }
}

**Peebels** · 15/08/2023, 13h27

Bon après recherche ca vient d'un problème de z-index mais je ne trouve pas de solution je suis obligé de le mettre pour avoir mon loader au dessus de ma page...

**mathieu** · 16/08/2023, 10h28

en effet l'utilisation de z-index n'est pas toujours évident, vous trouverez peut-être plus d'explications à adapter à votre page dans cet article :
https://philipwalton.developpez.com/...aitre-z-index/

**Peebels** · 22/08/2023, 09h26

Finalement je n'ai pas vraiment trouver de solution mais j' ai changé d'apparence mon loader qui maintenant part de bas en haut et qui ne me cause pas de souci. Ma question restera un mystère.

loader en css uniquement qui bloque les fonctionnalités de ma page

CSS

Discussions similaires

Partager

Partager