JSFiddle - React, Tailwind, and code Playground

by hanaeto

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/sprintf/1.0.3/sprintf.min.js"></script>
<link rel="stylesheet" href="http://getbootstrap.com/dist/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="loading">
  <div class='uil-squares-css' style='transform:scale(0.6);'><div><div></div></div><div><div></div></div><div><div></div></div><div><div></div></div><div><div></div></div><div><div></div></div><div><div></div></div><div><div></div></div></div>
</div>
<div id="divImg">
</div>

CSS

img {
  width: 100px;
  height: 100px;
  margin: 5px;
}
.loading {
  width: 100%;
  height: 100%;
  text-align: center;
  verical-align: middle;
  background-color: rgba(0, 0, 0, 0.2);
  position: absolute;
}

@-webkit-keyframes uilsquare {
  0% {
    background-color: #047ab3;
  }
  1% {
    background-color: #00cde8;
  }
  11% {
    background-color: #00cde8;
  }
  21% {
    background-color: #047ab3;
  }
  100% {
    background-color: #047ab3;
  }
}
@-webkit-keyframes uilsquare {
  0% {
    background-color: #047ab3;
  }
  1% {
    background-color: #00cde8;
  }
  11% {
    background-color: #00cde8;
  }
  21% {
    background-color: #047ab3;
  }
  100% {
    background-color: #047ab3;
  }
}
@-moz-keyframes uilsquare {
  0% {
    background-color: #047ab3;
  }
  1% {
    background-color: #00cde8;
  }
  11% {
    background-color: #00cde8;
  }
  21% {
    background-color: #047ab3;
  }
  100% {
    background-color: #047ab3;
  }
}
@-ms-keyframes uilsquare {
  0% {
    background-color: #047ab3;
  }
  1% {
    background-color: #00cde8;
  }
  11% {
    background-color: #00cde8;
  }
  21% {
    background-color: #047ab3;
  }
  100% {
    background-color: #047ab3;
  }
}
@-moz-keyframes uilsquare {
  0% {
    background-color: #047ab3;
  }
  1% {
    background-color: #00cde8;
  }
  11% {
    background-color: #00cde8;
  }
  21% {
    background-color: #047ab3;
  }
  100% {
    background-color: #047ab3;
  }
}
@-webkit-keyframes uilsquare {
  0% {
    background-color: #047ab3;
  }
  1% {
    background-color: #00cde8;
  }
  11% {
    background-color: #00cde8;
  }
  21% {
    background-color: #047ab3;
  }
  100% {
    background-color: #047ab3;
  }
}
@-o-keyframes uilsquare {
  0% {
    background-color: #047ab3;
  }
  1% {
    background-color: #00cde8;
  }
  11% {
    background-color: #00cde8;
  }
  21% {
    background-color: #047ab3;
  }
  100% {
    background-color: #047ab3;
  }
}
@keyframes uilsquare {
  0% {
    background-color: #047ab3;
  }
  1% {
 ...

JavaScript

var images = [
	"http://www.planwallpaper.com/static/images/518164-backgrounds.jpg",
  "http://kurld.com/images/wallpapers/cat-hd-wallpaper/cat-hd-wallpaper-4.jpg",
  "http://dcdn.designzzz.com/wp-content/uploads/2012/01/wowowo.jpg",
  "http://www.hd-wallpapersdownload.com/script/bulk-upload/desktop-hd-photos-of-cute-cats.jpg",
  "https://images2.alphacoders.com/201/201992.jpg",
  "http://freetopwallpaper.com/wp-content/gallery/cat/cute-cats-wallpapers-background-16.jpg",
  "http://i.imgur.com/eROXH.jpg",
  "https://cutecatshq.com/wp-content/uploads/2013/08/My-cutty-Cat.jpg",
  "http://www.hd-wallpapersdownload.com/script/bulk-upload/images-of-cute-dogs-and-cats-wallpaper.jpg",
  "https://images6.alphacoders.com/334/334727.jpg",
  "http://freetopwallpaper.com/wp-content/gallery/cat/cute-cats-wallpapers-background-42.jpg"
]

var promiseArray = [];
images.forEach( ( v ) => {
	promiseArray.push( new Promise( ( resolve, reject ) => {
  	console.log( "image2", v );
    var image = $( sprintf( "<img src='%s' class='img-rounded' />", v ) );
    image.load( () => resolve() );
    $( "#divImg" ).append( image );
  } ) );
} );


Promise.all( promiseArray ).then( ( values ) => {
	$( ".loading" ).css( { display: "none" } );
} );