how to make disappear a loading spiner after x seconds and let the main page appears

Question

i have started to learn HTML and CSS last december. Now, i have to finish a project using only HTML and CSS, no Javascipt or other languages. I have fullfilled all the requirements of the projects but it's now 5 days i am stuck on a problem which will look easy to solve for many of you. So, when the main page is loading, a loading spinner is required (creating one was not a problem). The problem for me is to make the spinner disappear after x seconds). i have tried and tried and tried and i did not succeed yet. my last attempt is bellow, the resultas are: the spinner disapear but a big white "panel" cover the top of the main page. here is the html code (the area concerned): many thanks for your help

.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%;
    opacity:1;
    animation: fade;
    animation-duration: 0s;
    animation-delay:3s;
    animation-fill-mode: 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-name:spin;
  animation-duration:3s;
  animation-fill-mode:forwards;
}

@keyframes spin {
    0% {
      transform: rotate(0deg);
      visibility:visible;
    }
    50%{
      transform: rotate(180deg);
      visibility:visible;
    }
    to {
      transform: rotate(360deg);
      visibility:hidden;
      display:none;
      height:0;
      width:0;

  }
}

@keyframes fade {
  from{
    opacity:1;
  }
  to{
    opacity:0;
    z-index:-100;
    display:none;
    height:0;
    width:0;
    clip-path:circle(0);/* rognage de la totalité donc disparition*/
  }
   }

@keyframes monanim {
from{
  overflow:hidden;
}
to{
  overflow:visible;
}
 }


.body {
  animation: monanim;
  animation-duration: 3s;
}

.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%;
    opacity:1;
    animation: fade;
    animation-duration: 0s;
    animation-delay:3s;
    animation-fill-mode: 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-name:spin;
  animation-duration:3s;
  animation-fill-mode:forwards;
}

@keyframes spin {
    0% {
      transform: rotate(0deg);
      visibility:visible;
    }
    50%{
      transform: rotate(180deg);
      visibility:visible;
    }
    to {
      transform: rotate(360deg);
      visibility:hidden;
      display:none;
      height:0;
      width:0;

  }
}

@keyframes fade {
  from{
    opacity:1;
  }
  to{
    opacity:0;
    z-index:-100;
    display:none;
    height:0;
    width:0;
    clip-path:circle(0);/* rognage de la totalité donc disparition*/
  }
   }

@keyframes monanim {
from{
  overflow:hidden;
}
to{
  overflow:visible;
}
 }


.body {
  animation: monanim;
  animation-duration: 3s;
}