"Image PreLoader"
Bootstrap 3.3.0 Snippet by abhijeetka

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html> <html> <head> <meta charset='UTF-8'> <title>Image PreLoader</title> <script type="text/javascript"> $(window).load(function() { $(".se-pre-con").fadeOut("slow"); }); </script> </head> <body> <div class="se-pre-con"></div> <div class="content"> <img src="https://picsum.photos/3000/1200/?random" style=" width:100%; height: auto;"> </div> </body> </html>
.se-pre-con { position: fixed; left: 0px; top: 0px; width: 100%; height: 100%; z-index: 9999; background: url(https://smallenvelop.com/demo/simple-pre-loader/images/loader-64x/Preloader_2.gif) center no-repeat #fff; }
$(window).load(function() { $(".se-pre-con").fadeOut("slow"); });

Related: See More

BLK• Design System
Image Crop jQuery
Image Checkbox
masonry Image Gallery

Questions / Comments: