Loader spinner - animation css
Bonjour,
Je suis sur un projet qui est basé que sur du css3 pas de JS ni de Jquery, je souhaite faire disparaitre mon animation au bout de 3000ms, mais lorsque je rajoute un timing animation-duration après la fonction linear cela ne fonctionne pas.
J'ai rajouter un display : none mais ça ne fonctionne pas.
Je souhaite avoir une piste. :? merci de votre aide.
Code:
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
| .loader-position {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1000;
background-color: white;
}
.loader {
width: 120px;
height: 120px;
border: 6px solid var(--color-primary);
border-radius: 50%;
border-top-color: var(--color-secondary);
border-bottom-color: var(--color-secondary);
border-left-color: var(--color-tertiary);
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(0deg);
animation: spin 1s linear;
}
@keyframes spin {
100% {
transform: translate(-50%, -50%) rotate(360deg);
}
} |
Code:
1
2
3
4
| <div class="loader-position">
<div class="loader">
</div> |
