JSFiddle - React, Tailwind, and code Playground

by hamix

HTML

<figure>
        <div class="image">
            <img class="img" onload="myFn()" src="http://i.ytimg.com/vi/7c9f9sr6BPg/0.jpg"/>
        </div>
    </figure>

CSS

figure{ position:relative; margin:0; max-width: 600px;}
img{max-width:100%; height:auto;}
.loader{background-color:#000;height:100%;margin:0 auto;position:absolute;text-align:center;top:0;width:100%}
.loader .bounce1{-webkit-animation-delay:-0.32s;animation-delay:-0.32s}
.loader .bounce2{-webkit-animation-delay:-0.16s;animation-delay:-0.16s;margin-left:13px}
.loader .bounce3{margin-left:26px}

.loader>div {
	width:10px;
	height:10px;
	margin-top:-5px;
	background-color:#cd0000;
	border-radius:100%;
	display:inline-block;
	position:absolute;
	vertical-align:top;
	top:50%;
	-webkit-animation:bouncedelay 1.4s infinite ease-in-out;
	animation:bouncedelay 1.4s infinite ease-in-out;
	-webkit-animation-fill-mode:both;
	animation-fill-mode:both
}

@-webkit-keyframes bouncedelay {
0%, 80%, 100% {
-webkit-transform:scale(0)
}
40% {
-webkit-transform:scale(1)
}
}
@keyframes bouncedelay {
0%, 80%, 100% {
transform:scale(0);
-webkit-transform:scale(0)
}
40% {
transform:scale(1);
-webkit-transform:scale(1)
}
}

JavaScript

jQuery.fn.extend({
   loadImage: function() {       
      return this.each(function() {
         var loading= jQuery('<div class="loader"><div class="bounce1"></div><div class="bounce2"></div><div class="bounce3"></div></div>').insertBefore(jQuery(this));
         jQuery(this).load(function(){   
            loading.remove();
         }).error(function() {
            loading.remove();
         });
      });
   }
});
$(".img").loadImage();