Preloader forever loading

  css, html, javascript, jquery

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

LEAVE A COMMENT