Loader doesn't want to disappear solved-CodePudding

I have a loader and i try to it disappear after 3 second but my code doesn't run. How to fix the problem ? i think it is my keyframes. Here is my css code. Thank for your help.

 
 .loader
 {
    width: 100px;
    height: 100px;
    border-radius: 100%;
    position: absolute;
    margin: 250px 0 0 130px;
 }
 
 .loader:before, .loader:after
{
    content: "";
    position: absolute;
    top: -10px;
    left: -10px;
    width: 100%;
    height: 100%;
    border-radius: 100%;
    border: 10px solid transparent;
    border-top-color: #9356DC;
    display: none;
}
.loader:before
{
    z-index: 100;
    animation: spin 1s infinite;
}
.loader:after
{
    border: 10px solid #FF79DA;
}
 
@keyframes spin{
0%{
    -webkit-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
}
100%{
    -webkit-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
}
}
@keyframes loader{
0%{
opacity: 1;
}
100%{
opacity: 0;
}
}
type here

I tried to add à keyframes but my keyframes doesn't run. I don't understant why.

This is the html code :

<div ></div>

Thank you matias

CodePudding user response：

This is the html code :

<div ></div>

CodePudding user response：

you just have to use the loader animation in the .loader class

.loader
 {
   background: red;
    width: 100px;
    height: 100px;
    border-radius: 100%;
    position: absolute;
    margin: 250px 0 0 130px;
    animation: loader 3s forwards; /* here */
   
 }
 
 .loader:before, .loader:after
{
    content: "";
    position: absolute;
    top: -10px;
    left: -10px;
    width: 100%;
    height: 100%;
    border-radius: 100%;
    border: 10px solid transparent;
    border-top-color: red;
}
.loader:before
{
    z-index: 100;
    animation: spin 1s infinite;
}
.loader:after
{
    border: 10px solid green;
}
 
@keyframes spin{
0%{
    -webkit-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
}
100%{
    -webkit-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
}
}
@keyframes loader{
  0%{
    opacity: 1;
  }
  100%{
    opacity: 0;
  }
}

<div ></div>