loader.ejs

<div class="main-loader text-center">
  <div class="text-center push-ups" style="padding-top: 18%">
      <p>
          <img
              class="loader-bar-lg"
              src="./src/images/dswap_low_opacity.png"
              alt=""
              
          />
      </p>
  </div>
</div>

<style>
  body {
      background: #fff;
      overflow: hidden;
      margin: 0;
      padding: 0;
      text-align: center !important;
  }

  .main-loader {
      background: rgba(38, 0, 255, 0.034);
      display: block;
      height: 100vh;
      overflow: hidden;
      position: fixed;
      width: 100vw;
      z-index: 9999;
  }
  .push-ups {
      padding: 18%;
  }
  p {
      margin-top: 0;
      margin-bottom: 30px;
  }
  .loader-bar-lg {
    width: 150px;
      left: 50%;
      -webkit-animation: spin 2s linear infinite;
      -moz-animation: spin 2s linear infinite;
      animation: spin 2s linear infinite;
  }
  @media only screen and (max-device-width: 480px) {
  .push-ups {
      padding-top: 60%!important;
  }
}
  @keyframes spin {
      from {
          -ms-transform: rotate(0deg);
          -moz-transform: rotate(0deg);
          -webkit-transform: rotate(0deg);
          -o-transform: rotate(0deg);
          transform: rotate(0deg);
      }
      to {
          -ms-transform: rotate(360deg);
          -moz-transform: rotate(360deg);
          -webkit-transform: rotate(360deg);
          -o-transform: rotate(360deg);
          transform: rotate(360deg);
      }
  }
</style>