When i am running the above code. the pre-loader is loading forever.
I saw some example but they are not solving my problem.
I only want to load until the page or fully loads.
how can i solve this problem.
If you have any other solution for this. it would be helpful.
$(window).load(function() {
$(".wrapper").fadeOut('slow');
});.main-circle {
width: 150px;
height: 150px;
border:10px solid #dd1322;
border-top: 10px solid transparent ;
border-right:10px solid transparent;
position:relative;
border-radius:50%;
display: flex;
justify-content: center;
align-items: center;
animation: rotate 2s infinite;
}
.circle1:before {
width: 100%;
height: 100%;
position:absolute;
content:'';
border:10px solid transparent;
border-right:10px solid #4267B2;
transform: rotate(40deg);
border-radius:50%;
}
.circle1 {
animation: rotate 1.5s infinite .4s;
display: flex;
justify-content: center;
align-items: center;
width: 120px;
height: 120px;
border:10px solid #4267B2;
border-top:10px solid transparent;
border-right:10px solid transparent;
transform: rotate(-20deg);
border-radius:50%;
position:relative;
}
.circle1:before {
content:'';
width: 100%;
height: 100%;
border-radius:50%;
position:absolute;
border:10px solid transparent;
border-right:10px solid #4267B2;
transform: rotate(60deg);
}
@keyframes rotate {
from {}
to {
transform: rotate(400deg);
}
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
<div class="main-circle">
<div class="circle1">
</div>
</div>
</div>Source: Ask Javascript Questions
