Search code examples
textyoutubeloadlazy-evaluationlazy-loading

Lazy load-style text as seen on new YouTube design?

Can't seem to find what library this is, or anything about it, but I'm seeing it more and more lately. Querying dynamic text via lazyload (with grey bg placeholder). Examples are: cloudflare.com, youtube.com, upwork.com. enter image description here

Anyone know what it is? Thanks.

Solution

  • No library needed, actually it's really simple and can be done with only HTML and CSS Animation, see the example below.

    /*
The javascript here is only for demonstration purpose in order to switch 
between 'pulse' and 'wave' animation effect, it is not actually required.
*/

jQuery(document).ready(function ($){
  $('#pulse').click(function(){
      $('.placeholder').removeClass('wave').addClass('pulse');
  })
  
  $('#wave').click(function(){
      $('.placeholder').removeClass('pulse').addClass('wave');
  })

  $('#stop').click(function(){
      $('.placeholder').removeClass('pulse wave');
  })
});
    .placeholder{
  margin:15px;
  padding:10px;
  height: 115px;
  border: 1px solid lightgrey;
  border-radius: 5px;
}

.placeholder div{background:#E8E8E8;}

.placeholder .square{
  float:left;
  width: 90px;
  height:56px;
  margin:0 0 10px;
}

.placeholder .line{height:12px;margin:0 0 10px 105px;}
.placeholder .line:nth-child(2){width: 120px;}
.placeholder .line:nth-child(3){width: 170px;}
.placeholder .line:nth-child(4){width: 150px;}

.placeholder .circle{
  float:left;
  width: 15px;
  height:15px;
  margin:0 15px 10px 0;
  border-radius:15px;
}

/* 
  --------------
  Pulse effect animation 
  Activated by adding a '.pulse' class to the placeholder
  --------------
*/

.placeholder.pulse div{
  animation: pulse 1s infinite ease-in-out;
  -webkit-animation:pulse 1s infinite ease-in-out;
}

@keyframes pulse
{
  0%{
    background-color: rgba(165,165,165,.1);
  }
  50%{
    background-color: rgba(165,165,165,.3);
  }
  100%{
    background-color: rgba(165,165,165,.1);
  }
}

@-webkit-keyframes pulse
{
  0%{
    background-color: rgba(165,165,165,.1);
  }
  50%{
    background-color: rgba(165,165,165,.3);
  }
  100%{
    background-color: rgba(165,165,165,.1);
  }
}

/* 
  --------------
  Wave effect animation 
  Activated by adding a '.wave' class to the placeholder
  --------------
*/

.placeholder.wave div{
    animation: wave 1s infinite linear forwards;
    -webkit-animation:wave 1s infinite linear forwards;
    background: #f6f7f8;
    background: linear-gradient(to right, #eeeeee 8%, #dddddd 18%, #eeeeee 33%);
    background-size: 800px 104px;
}

@keyframes wave{
    0%{
        background-position: -468px 0
    }
    100%{
        background-position: 468px 0
    }
}

@-webkit-keyframes wave{
    0%{
        background-position: -468px 0
    }
    100%{
        background-position: 468px 0
    }
}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button id="pulse">Pulse Effect</button>
<button id="wave">Wave Effect</button>
<button id="stop">Stop Animation</button>

<div class="placeholder pulse">

  <div class="square"></div>

  <div class="line"></div>
  <div class="line"></div>
  <div class="line"></div>

  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>

</div>

    The above code is inspired from these articles: