public
Created

Unintrusive img loading indicator

  • Download Gist
loading.html
HTML
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35
<html>
<head>
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0" />
<style>
@-webkit-keyframes spin {from {
-webkit-transform: rotate(0deg)
}
to {
-webkit-transform: rotate(360deg)
} }
 
.loading {
display: inline-block;
content: '';
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACYAAAAmCAYAAACoPemuAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA5hJREFUeNrMWFtrE0EUzpikTW+aemtrEy9Iq7VqLAiKgoIg/gDf/Y2+iIL44JOIRuu1rb1YtBYTa2q1bUyTZj0HvpHjsJdJdgge+NhJdnbm23OfVQk3spdwh5AhvCU8sH3Q8zzf//c4InaW0C3GsSVlOe8a4SRhifA4xn77oYxNwu+wiTYayxGmYK4pEGxHDhIO45qLmmxD7Ce7gnYJwnVhNltJEwZb2deW2LQgpzX3jw9HrMGaSmKsCOsuiLE8JdQECW1aG+klDAhSdcI3V8RqIKc10w2T2siw8XvV5iFJjDe7SrgBBzVlWvibhyDICXPLl5AO3yW09Yuw7UdEKZUJShfnAV7gNOE14Zmx0UPCbSNiVwjvCHnCPkJR3O8R411CyYfQILSaovEWJdyloDzmgRyTPEV4TniFe18IM4QJEF4Uz/ll+6bh8HVxr48wgmqhxH9/H5CmvEUYlS+EKyfERyDGcgjmq0W4ShJaZG1tiNSRAwll7FUljc2bxLSwli6KqFPieleQa0cOQEvmugmYeY2I7QaZco6wTDgHSKc8EpPYiI+WWPOrRGjHplbW4FtM8grhBCJqNmZtriNKFdyjTIQ2faM00VnpQmligpWwtqfTxKz7MSZ2LKKH4jlPCN8dcUkiCJIhc6op9FpdEYtdJtxzRCwHYqHWSyGvRHUHTYfWS9m4EE84SpgMmcNh/FI7qwPpxZ5h7dL2f+v8Nm1PP6GAa8dEReScAjoNnXQ5ALZi7DeJUldGV1IL0lhQ5p9Ad5EW/VcaWmuXGBfzLNYawonpK+GzDbEhlKA+wzk9FNlSDG3VDAvxi+apB+NOZZk0VwkyZQFF2yTEGnqDM6XumbIwR90yPTSE1sbQGHhGVHJbNEcEGyaxmzjNyDecA3Tlz2KeJnw/gtAl9HllfDrQMoqON2kookLEZk1TVkDMg2MWffzpgliox/CfMfw/j1ZmAHOaaCyH4VO6Ey6haxmK8rEiCO0EnPtGsYF+O3kEG8cGTdx/IT4BaKswiTVh1gZeoow+z5OBYDp/KeQkXRB+4eGwIu+b4yo2yuN3BuOPRoLdEG13y+fKcZQSra0Fv8V8ZFFoSKGAZ1o9VwYJR+EZo3bOBJyuTGkgmhWQhkmdEDtumHDGJ02EdSefYFZ5Mu93QUzmmw2YsVV5L8ypbL7L2Xy4mxf+tdBm1l8XgcDjHy6I1XFiiisfgIQrH7MRmQJWXCz4R4ABAGqAAd+a+e3dAAAAAElFTkSuQmCC) 50% 50% no-repeat;
-webkit-background-size: 19px 19px;
-webkit-animation: spin 1s linear infinite;
}
 
</style>
</head>
<body>
<img src="http://westorlandonews.com/wp-content/uploads/2009/11/Oasis-of-the-seas_240609.jpg?4uoihddjdk33" height="100" width="150" class="loading" />
<script>
var els = document.getElementsByClassName('loading');
for (var i = 0; i < els.length; i++) {
els[i].addEventListener('load', function() { this.className=''; });
}
</script>
</body></html>

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.