Often we see websites that have lots of CSS, images and javascripts that take a while to load. Visitors might lose interest while waiting for pages to load completely. So now we will create Loading Bar with CSS3 Keyframes and use jQuery to show Loading bar while page content loads completely.
First we are going to create a Loading bar with HTML and CSS3 keyframes. Here we have a div tag with id=box. And every character in Loading word is wrapped with a span tag.
|
1 2 3 4 5 6 7 8 9 |
<div class="box" id="box"> <span class='word'>L</span> <span class='word'>O</span> <span class='word'>A</span> <span class='word'>D</span> <span class='word'>I</span> <span class='word'>N</span> <span class='word'>G</span> </div> |
|
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 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 |
.box { color: white; display: block; font-size: 80px; height: 100%; overflow: hidden; position: fixed; text-align: center; vertical-align: middle; width: 100%; z-index: 9999; background: -webkit-linear-gradient(284deg, #006c62, #a8223c); background: linear-gradient(284deg, #006c62, #a8223c); } .word { position: relative; top: -webkit-calc(50% - 60px); top: calc(50% - 60px); text-shadow: 0px 0px 4px #FFFFFF; } .word:nth-child(1) { -webkit-animation: fade 4s infinite 200ms; animation: fade 4s infinite 200ms; } .word:nth-child(2) { -webkit-animation: fade 4s infinite 400ms; animation: fade 4s infinite 400ms; } .word:nth-child(3) { -webkit-animation: fade 4s infinite 600ms; animation: fade 4s infinite 600ms; } .word:nth-child(4) { -webkit-animation: fade 4s infinite 800ms; animation: fade 4s infinite 800ms; } .word:nth-child(5) { -webkit-animation: fade 4s infinite 1000ms; animation: fade 4s infinite 1000ms; } .word:nth-child(6) { -webkit-animation: fade 4s infinite 1200ms; animation: fade 4s infinite 1200ms; } .word:nth-child(7) { -webkit-animation: fade 4s infinite 1400ms; animation: fade 4s infinite 1400ms; } @-webkit-keyframes fade { 50% { opacity: 0.02; } } @keyframes fade { 50% { opacity: 0.02; } } |
Complete Code:
Include jQuery Library into any page where this code will be used.
|
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 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 |
<html> <head> <script language="javascript" type="text/javascript"> $(window).bind("load", function() { document.getElementById('box').style.display='none'; }); </script> <style> .box { color: white; display: block; font-size: 80px; height: 100%; overflow: hidden; position: fixed; text-align: center; vertical-align: middle; width: 100%; z-index: 9999; background: -webkit-linear-gradient(284deg, #006c62, #a8223c); background: linear-gradient(284deg, #006c62, #a8223c); } .word { position: relative; top: -webkit-calc(50% - 60px); top: calc(50% - 60px); text-shadow: 0px 0px 4px #FFFFFF; } .word:nth-child(1) { -webkit-animation: fade 4s infinite 200ms; animation: fade 4s infinite 200ms; } .word:nth-child(2) { -webkit-animation: fade 4s infinite 400ms; animation: fade 4s infinite 400ms; } .word:nth-child(3) { -webkit-animation: fade 4s infinite 600ms; animation: fade 4s infinite 600ms; } .word:nth-child(4) { -webkit-animation: fade 4s infinite 800ms; animation: fade 4s infinite 800ms; } .word:nth-child(5) { -webkit-animation: fade 4s infinite 1000ms; animation: fade 4s infinite 1000ms; } .word:nth-child(6) { -webkit-animation: fade 4s infinite 1200ms; animation: fade 4s infinite 1200ms; } .word:nth-child(7) { -webkit-animation: fade 4s infinite 1400ms; animation: fade 4s infinite 1400ms; } @-webkit-keyframes fade { 50% { opacity: 0.02; } } @keyframes fade { 50% { opacity: 0.02; } } </style> </head> <body> <div class="box" id="box"> <span class='word'>L</span> <span class='word'>O</span> <span class='word'>A</span> <span class='word'>D</span> <span class='word'>I</span> <span class='word'>N</span> <span class='word'>G</span> </div> <div> The whole page content will be placed in this section. </div> </body> </html> |
