Add loading Animation in your website

I just made this cool loading animation for website which is light and help your website in many ways. Here’s why some reason you use loading animation:

  1. It will distract user till your page fully load and them them a sense of moment.
  2. it prevent user from accessing page until full page loads, great help when you using a adsense at above the fold.

Most website use animation loader nowadays, But I can ensure you that I code I wrote is fastest and I done a lot of research to make it, I wrote it in such a way it won’t affect your website speed at all.
demo: https://eclixouser.blogspot.com/

Place it in your website head and you’re done:

<style>
.lds-ripple {
  display: inline-block;
  position: relative;
  width: 80px;
  height: 80px;
}
.lds-ripple div {
  position: absolute;
  border: 4px solid #fff;
  opacity: 1;
  border-radius: 50%;
  animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}
.lds-ripple div:nth-child(2) {
  animation-delay: -0.5s;
}
@keyframes lds-ripple {
  0% {
    top: 36px;
    left: 36px;
    width: 0;
    height: 0;
    opacity: 1;
  }
  100% {
    top: 0px;
    left: 0px;
    width: 72px;
    height: 72px;
    opacity: 0;
  }
}

.preloader {
    position: fixed;
    width: 100%;
    top: 0;
    height: 100%;
    background: rgba(38,12,12,.65);
    text-align: center;
    overflow: hidden;
z-index: 99999;
    display: table;
}
.preloader &gt; div {
    display: table-cell;
    vertical-align: middle;
}
</style>
     <script>
       window.addEventListener(&#39;load&#39;,function(){
document.querySelector(&#39;.preloader&#39;).style.display=&#39;none&#39;;
})
</script>
<noscript>
<style>
  .preloader{
display:none
}
</style>
    </noscript>

Save Edit
cancel

3 Likes

Please wrap code with ``` symbol for highlighting.

2 Likes