Faire disparaître un loader avec du css

Bonjour à tous,
J'ai un petit beug, je n'arrive pas à faire disparaître ma div une fois mon chargement terminé avec son background.
Je travaille que sur du css, je peux pas utiliser de JS OU JQUERY.
Pourtant j'ai essayé display none ou overflow hidden.
Merci.
".loader-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1000;
background-color: white;
overflow: hidden;
}
.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-primary);
border-left-color: var(--color-tertiary);
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(0deg);
animation: spin 1s linear 4;
}
@keyframes spin {
100% {
transform: translate(-50%, -50%) rotate(360deg);
}
}"
"<div class="loader-container">
<div class="loader">
</div>
</div>"