Loading font component loading effect

design sketch ：

html Code ：

<div class="font">Loading</div>

 css Code ：

<style>
    @keyframes loading {
      0% {
        height: 100%;
      }
      100% {
        height: 0%;
      }
    }
    .font {
      position: relative;
      font-size: 30px;
      font-weight: 700;
      color: tomato;
    }
    .font::before {
      position: absolute;
      top: 0;
      left: 0;
      height: 50%;
      content: 'Loading';
      font-size: 30px;
      font-weight: 700; 
      overflow: hidden;
      color: #f0f0f0;
      animation: loading 3s linear infinite;
    }
  </style>

principle ： Make the white font height gradually smaller , The overflow part is hidden , Visually, it looks like the font is gradually loaded up .

What changes is the size percentage of the height .