If you want to use background image for your web but it took too long to load, what can you do ?
You probably want to show a preloader (or spinner) while your background image is being loaded, right ?
If so, here are the steps (demo: http://codepen.io/anon/pen/FHCJw)
1. To display the spinner / preloaded:
HTML:
CSS:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <body> <div id="preloader_wrap"> <div id="spinner_wrap"> <div class="spinner"> <div class="rect1"></div> <div class="rect2"></div> <div class="rect3"></div> <div class="rect4"></div> <div class="rect5"></div> </div> </div> </div> <div id="content">Your content here</div> </body> </html>
CSS:
2. To hide the spinner when your image is loaded:#preloader_wrap { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: #fff; z-index: 999; } #spinner_wrap { width: 200px; height: 200px; position: absolute; left: 50%; top: 50%; background-repeat: no-repeat; background-position: center; margin: -100px 0 0 -100px; } .spinner { margin: 100px auto; width: 50px; height: 30px; text-align: center; font-size: 10px; } .spinner > div { background-color: #2980b9 /*dark blue*/; height: 100%; width: 6px; display: inline-block; -webkit-animation: stretchdelay 1.2s infinite ease-in-out; animation: stretchdelay 1.2s infinite ease-in-out; } .spinner .rect2 { -webkit-animation-delay: -1.1s; animation-delay: -1.1s; } .spinner .rect3 { -webkit-animation-delay: -1.0s; animation-delay: -1.0s; } .spinner .rect4 { -webkit-animation-delay: -0.9s; animation-delay: -0.9s; } .spinner .rect5 { -webkit-animation-delay: -0.8s; animation-delay: -0.8s; } @-webkit-keyframes stretchdelay { 0%, 40%, 100% { -webkit-transform: scaleY(0.4); } 20% { -webkit-transform: scaleY(1.0); } } @keyframes stretchdelay { 0%, 40%, 100% { transform: scaleY(0.4); -webkit-transform: scaleY(0.4); } 20% { transform: scaleY(1.0); -webkit-transform: scaleY(1.0); } }
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script type="text/javascript"> var jpgFile = 'http://farm4.staticflickr.com/3812/11264786296_891530550e_o.jpg'; //or your own picture $("<img/>").attr('src', jpgFile).load(function() { $("#preloader_wrap").hide(); $("body").css("background", "url('" + jpgFile + "') no-repeat center center fixed"); $("#content").show(); }); </script>
That's it ! You'll have a nice preloader and a nice background
No comments:
Post a Comment