Report loader

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
<script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script> 
<style>
  *{
    font-family: 'Inter', sans-serif;
  }
   html, body  {
        height: 100%;
        margin: 0;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    .childDiv{
        display: flex;
       align-items: center; 
       justify-content: space-between;
    }
    .footer{
        position: absolute;
        left: 0;
    }
    .exploreBtn{
        border: none;
        background-color: #F75B24;
        padding: 1rem 2rem;
        color: white;
        border-radius: 10px;
        font-weight: 700 !important;
    }
    .exploreBtn:hover{
        background-color: #d54f1f;
    }
    .font-style{
      font-size: 50px;
      font-weight: bold !important;
    }
    .font-style-thin{
      font-size: 30px;
      font-weight: 400 !important;
    }
</style>
  <body style="background-color: white;">
            <div class="childDiv" style="display: flex;flex-direction: column;text-align: center;justify-content: center;">
              <lottie-player src="https://assets6.lottiefiles.com/packages/lf20_kP6sKi50mK.json" background="transparent" speed="1" style="width: 250px; height: 250px; margin: 0;" loop autoplay></lottie-player>
                    <p class="font-style" style="max-width: 500px;margin: 0;">Loading reports..</p>
                    <p class="font-style-thin" style="max-width: 500px;margin: 0;margin-top: 2rem;">It will take few seconds</p>
    </div>
</body>
</html>
Editor is loading...