<style type="text/css">
  /* Preloader */
  .lds-css {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #fff;
    z-index: 999999;
  }

  @keyframes lds-ball {

    0%,
    100% {
      animation-timing-function: cubic-bezier(0.45, 0, 0.9, 0.55);
    }

    0% {
      -webkit-transform: translate(0, 0);
      transform: translate(0, 0);
    }

    50% {
      -webkit-transform: translate(0, 120px);
      transform: translate(0, 120px);
      animation-timing-function: cubic-bezier(0, 0.45, 0.55, 0.9);
    }

    100% {
      -webkit-transform: translate(0, 0);
      transform: translate(0, 0);
    }
  }

  @-webkit-keyframes lds-ball {

    0%,
    100% {
      animation-timing-function: cubic-bezier(0.45, 0, 0.9, 0.55);
    }

    0% {
      -webkit-transform: translate(0, 0);
      transform: translate(0, 0);
    }

    50% {
      -webkit-transform: translate(0, 120px);
      transform: translate(0, 120px);
      animation-timing-function: cubic-bezier(0, 0.45, 0.55, 0.9);
    }

    100% {
      -webkit-transform: translate(0, 0);
      transform: translate(0, 0);
    }
  }

  .lds-ball {
    top: 45%;
    left: 44%;
    position: relative;
  }

  .lds-ball div {
    position: absolute;
    border-radius: 100%;
    -webkit-animation: lds-ball 1s linear infinite;
    animation: lds-ball 1s linear infinite;
  }

  .lds-ball {
    width: 30px !important;
    height: 30px !important;
    -webkit-transform: translate(-100px, -100px) scale(1) translate(100px, 100px);
    transform: translate(-100px, -100px) scale(1) translate(100px, 100px);
  }
</style>
<div class="preloader" id="preloader">
  <div class="lds-css ng-scope">
    <div style="width:100%;height:100%;" class="lds-ball">
      <div class="text-center"><img src="assets/images/logo.png" width="60">
      </div>
    </div>
  </div>
</div>
<script>
  window.addEventListener("load", function() {
    preloader.style.display = 'none';
  });
</script>
