Menambahkan loader di dalam div dengan id index.html

index.html

<!-- head -->
<style>
      .loading {
        background: linear-gradient(to right, #eeeeee 8%, #dddddd 18%, #eeeeee 33%);
        animation: load 1.9s linear infinite;
        height: 20px;
        position: relative;
        width: 100%
      }
      .mask {
        position: absolute;
        top: 0;
        right: 0;
        height: 100%;
        background-color: white
      }
      .body .loading {
        margin-bottom: 10px
      }
      .loading.img-loading {
        height: 300px;
        margin-bottom: 20px
      }
      .loading.text-1 .mask {
        width: 20%;
      }
      .loading.text-3 .mask {
        width: 50%;
      }
      .container {
        padding: 5px 15px;
      }
      .header {
        box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
        padding: 0 15px;
        display: flex;
        align-items: center;
        height: 50px;
        margin-bottom: 20px
      }
      .header .loading {
        height: 40px;
      }
      .header .loading .mask {
        height: 100%;
        width: 70%
      }
      body {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        font-family: Arial, Helvetica, sans-serif;
        color: #333
      }
      @keyframes load {
        from {
          background-position-x: 0
        }
        to {
          background-position-x: 700px
        }
      }
</style>

<!-- body -->
<div id="app">
  <div class="header container">
    <div class="loading">
      <div class="mask"></div>
    </div>
  </div>
  <div class="body container">
    <div class="loading img-loading"></div>
    <div class="loading text-1">
      <div class="mask"></div>
    </div>
    <div class="loading text-2">
      <div class="mask"></div>
    </div>
    <div class="loading text-3">
      <div class="mask"></div>
    </div>
  </div>
</div>