Preloader

index.html

  <h1>Preloader</h1>

<!-- Preloader -->
   <div class="preloader">
        <div class="preloader_in">
           <div class="loader_big"></div> 
         <div class="loader_small"></div>
         <p>Loading</p>
         </div>





<span class="IDD"> Follow me on Twitter<a target="_blank" href="https://twitter.com/haroonabbhas" style=" color:blue;"> @haroonabbhas</a>
</span>

ojbrpxw.markdown

OJBrpxw

A Pen by abbhas on CodePen.

License.

script.js

  
/*Use it for onload or delay the timer*/

 /*window.addEventListener('load', function() {
      var preloader = document.querySelector('.preloader');
      setTimeout(function() {
        preloader.style.display = 'none';
      }, 2000); // 2000 milliseconds (2 seconds) delay
    });*/

style.css

@import url('https://fonts.googleapis.com/css2?family=Bruno+Ace+SC&display=swap');



body{
  background:#000;
}
.preloader_in{
  position:relative;
}

.preloader .loader_big {
  width: 120px;
  height: 120px;

  box-shadow: inset 0 0 10px #e91e63, 0 0 14px #05C7F2;
  border: 2px solid #e91e63;
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  position:relative;
  left: 0;
  right: 0;
  margin: 0 auto;
}

/* Animation */
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}


.loader_small {
  width: 100px;
  height: 100px;
  border: 3px solid #05C7F2;
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin_small 1s linear infinite;
  position:absolute;
  top:10px;
  left:0;
  right:0;
  text-align:center;
  margin:0 auto;
}

/* Animation */
@keyframes spin_small {
  100% { transform: rotate(0deg); }
  0% { transform: rotate(360deg); }
}



.preloader p{
  position:absoulute;
  z-index:999;
  top:10px;
  font-size:2rem;
  color:white;
  text-shadow:0px 0px 5px #fff,0px 0px 5px #614ad3;
  text-align:center;
  left:0;
  Right:0;
  font-family: 'Bruno Ace SC';

}

.IDD{
  position:fixed;
  bottom:0;
  color:#fff;
  right:0;
  left:0;
  margin:0 auto;
  text-align:center;
  font-size:20px;
  font-family: 'Bruno Ace SC';
}