JSFiddle - React, Tailwind, and code Playground

by Hugo Carneiro

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.lazyload/1.9.1/jquery.lazyload.min.js"></script>
<script src="http://emn178.github.io/jquery-lazyload-any/src/jquery.lazyload-any.js"></script>
<script src="https://emn178.github.io/jquery-lazyload-any/src/jquery.lazyload-any.js"></script>
<div class="container">
  <div class="row">
    <div class="col-xs-12">
      <h1>Malesuada Vulputate Aenean</h1>
      <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Etiam porta sem malesuada magna mollis euismod. Nullam quis risus eget urna mollis ornare vel eu leo. Curabitur blandit tempus porttitor.</p>
      <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Etiam porta sem malesuada magna mollis euismod. Nullam quis risus eget urna mollis ornare vel eu leo. Curabitur blandit tempus porttitor.</p>
      <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Etiam porta sem malesuada magna mollis euismod. Nullam quis risus eget urna mollis ornare vel eu leo. Curabitur blandit tempus porttitor.</p>
      <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Etiam porta sem malesuada magna mollis euismod. Nullam quis risus eget urna mollis ornare vel eu leo. Curabitur blandit tempus porttitor.</p>
      <h1>Malesuada Vulputate Aenean</h1>
      <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Etiam porta sem malesuada magna mollis euismod. Nullam quis risus eget urna mollis ornare vel eu leo. Curabitur blandit tempus porttitor.</p>
      <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Etiam porta sem malesuada magna mollis euismod. Nullam quis risus eget urna mollis ornare vel...

CSS

@-webkit-keyframes animate-width {
  0% {
    width: 0%;
  }
  100% {
    width: 100%;
  }
}

@-moz-keyframes animate-width {
  0% {
    width: 0%;
  }
  100% {
    width: 100%;
  }
}

@keyframes animate-width {
  0% {
    width: 0%;
  }
  100% {
    width: 100%;
  }
}

.wrapper {
  display: block;
  width: 0%;
  height: 50px;
  background-color: #E60;
}

.wrapper.ready {
  -webkit-animation: animate-width;
  -moz-animation: animate-width;
  animation: animate-width;
  animation-duration: 0.8s;
  -webkit-animation-duration: 0.8s;
  -moz-animation-duration: 0.8s;
  animation-fill-mode: forwards;
  -webkit-animation-fill-mode: forwards;
}

JavaScript

$('.lazyload').lazyload({load: function(element) {
  setTimeout(function() {
  	$(element).addClass('ready');
  }, 500);
}});