<h2>With data-attributes & content</h2>
<p data-text="loading" class="method-1">loading</p>

<h2>With background-clip</h2>
<p class="method-2">loading</p>

<h2>With clip rect</h2>
<p data-text="loading" class="method-3">loading</p>

// 1: With data-attibutes & content

.method-1 {
  position: relative;
  display: inline-block;
  font-size: 100px;
  color: #d4d4d4;

  &:before {
    content: attr(data-text);
    position: absolute;
    overflow: hidden;
    white-space: nowrap;
    width: 0;
    color: #72cc96;
    animation: fill-1 2s infinite;
  }
}

@keyframes fill-1 {
  50%   { width: 100%; }
  100%  { width: 0%;   }
}


// 2: With background-clip

.method-2 {
  display: inline-block;
  font-size: 100px;
  background: url('https://s3.amazonaws.com/f.cl.ly/items/0A2z3P0k3C45013S0z1J/clip-bg.jpg') no-repeat;
  -webkit-background-clip: text;
  color: rgba(255, 255, 255, 0);
  text-shadow: 0 0 rgba(0, 0, 0, .1);
  background-size: 0 100%;
  animation: fill-2 2s infinite;
}

@keyframes fill-2 {
  50%   { background-size: 100% 100%; }
  100%  { background-size: 0 100%;    }
}


// 3: With clip rect

.method-3 {
  font-size: 100px;
  position: relative;
  color: #d4d4d4;
  display: inline-block;

  &:before {
    content: attr(data-text);
    position: absolute;
    color: #72cc96;
    clip: rect(0, 0, 100px, 0);
    animation: fill-3 2s infinite;
  }
}

@keyframes fill-3 {
  50%   { clip: rect(0, 350px, 100px, 0); }
  100%  { clip: rect(0, 0, 100px, 0);     }
}


// Presentation styles

body {
  text-align: center;
}

p {
  margin: 50px 0;
}