Adding page pre loader image in websites while loading
-
- 0
code
===========================
<div id=”site-loader” class=”load-complete”>
<div class=”load-position”>
<div class=”logo”><img src=”Image url” alt=”Title”/></div> // Provide Image url and title here
<h6><?php _e( ‘Please wait, loading…’, “Title” ); ?></h6>
<div class=”loading”>
<div class=”loading-line”></div>
<div class=”loading-break loading-dot-1″></div>
<div class=”loading-break loading-dot-2″></div>
<div class=”loading-break loading-dot-3″></div>
</div>
</div>
</div>
style
================================
.load-complete {
position: fixed;
overflow: hidden;
background: #fff;
width: 100%;
height: 100%;
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index: 999999;
}
.load-complete .load-position {
position: absolute;
top: 50%;
left: 0;
z-index: 999;
right: 0;
margin-top: -100px;
}
.load-complete .logo {
color: #E74C3C;
text-align: center;
display: block;
margin-bottom: 20px;
font-size: 30px;
font-weight: 600;
}
.load-complete .load-position h6 {
text-align: center;
color: #000;
font-size: 12px;
font-weight: 400;
font-style: italic;
}
.load-complete .loading {
position: absolute;
width: 100%;
height: 1px;
margin: 20px auto;
left: 0;
right: 0;
}
.load-complete .loading-line {
position: absolute;
background: #eee;
width: 100%;
height: 2px;
}
.load-complete .loading-dot-1 {
-webkit-animation: loading 2s infinite;
-moz-animation: loading 2s infinite;
-ms-animation: loading 2s infinite;
-o-animation: loading 2s infinite;
animation: loading 2s infinite;
}
.load-complete .loading-break {
position: absolute;
background: #222;
width: 10px;
height: 2px;
}
.load-complete .loading-dot-2 {
-webkit-animation: loading 2s 0.5s infinite;
-moz-animation: loading 2s 0.5s infinite;
-ms-animation: loading 2s 0.5s infinite;
-o-animation: loading 2s 0.5s infinite;
animation: loading 2s 0.5s infinite;
}
.load-complete .loading-dot-3 {
-webkit-animation: loading 2s 1s infinite;
-moz-animation: loading 2s 1s infinite;
-ms-animation: loading 2s 1s infinite;
-o-animation: loading 2s 1s infinite;
animation: loading 2s 1s infinite;
}
jquery
=======================
if( $( ‘#site-loader’ ).length ) {
/* Event – Window Load */
if (!$(‘html’).is(‘.ie6, .ie7, .ie8’))
{
/* Event – Window Load */
$(window).load(function()
{
/* Loader */
$(“#site-loader”).delay(1000).fadeOut(“slow”);
});
/* Event – Window Load /- */
}
else
{
$(“#site-loader”).css(‘display’,’none’);
}
/* Event – Window Load /- */
}
code =========================== <div id=”site-loader” class=”load-complete”> <div class=”load-position”> <div class=”logo”><img src=”Image url” alt=”Title”/></div> // Provide Image url and title here <h6><?php _e( ‘Please wait, loading…’, “Title” ); ?></h6> <div class=”loading”> <div class=”loading-line”></div> <div class=”loading-break loading-dot-1″></div> <div class=”loading-break loading-dot-2″></div> <div class=”loading-break loading-dot-3″></div> </div> </div> </div> style ================================ .load-complete { position: fixed; overflow: hidden; background: #fff;…
code =========================== <div id=”site-loader” class=”load-complete”> <div class=”load-position”> <div class=”logo”><img src=”Image url” alt=”Title”/></div> // Provide Image url and title here <h6><?php _e( ‘Please wait, loading…’, “Title” ); ?></h6> <div class=”loading”> <div class=”loading-line”></div> <div class=”loading-break loading-dot-1″></div> <div class=”loading-break loading-dot-2″></div> <div class=”loading-break loading-dot-3″></div> </div> </div> </div> style ================================ .load-complete { position: fixed; overflow: hidden; background: #fff;…