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.

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

.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;

Save Edit


Please wrap code with ``` symbol for highlighting.