Skip to content

Instantly share code, notes, and snippets.

@hemraj7171

hemraj7171/instruction.txt

Created March 2, 2017 10:54
Show Gist options
  • Save hemraj7171/68f999109b00c3401e6ca79c8b3a2343 to your computer and use it in GitHub Desktop.
Save hemraj7171/68f999109b00c3401e6ca79c8b3a2343 to your computer and use it in GitHub Desktop.
Download ZIP
Simple site loader js/css/html, Simple page loader before page load
Raw
instruction.txt
1. Add following div just after <body> tag
<div class="top-loader-wrapper">
<div class="cssload-container">
<div class="cssload-speeding-wheel"></div>
</div>
</div>
2. Include jquery
3. Add style at head for the icon design
.top-loader-wrapper {
z-index: 9999999;
background: #fff;
width: 100%;
height: 100%;
position: fixed;
opacity: 0.98;
top: 0;
}
.cssload-container {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
.cssload-speeding-wheel {
width: 49px;
height: 49px;
margin: 0 auto;
border: 3px solid red;
border-radius: 50%;
border-left-color: transparent;
border-right-color: transparent;
animation: cssload-spin 725ms infinite linear;
-o-animation: cssload-spin 725ms infinite linear;
-ms-animation: cssload-spin 725ms infinite linear;
-webkit-animation: cssload-spin 725ms infinite linear;
-moz-animation: cssload-spin 725ms infinite linear;
}
@keyframes cssload-spin {
100%{ transform: rotate(360deg); transform: rotate(360deg); }
}
@-o-keyframes cssload-spin {
100%{ -o-transform: rotate(360deg); transform: rotate(360deg); }
}
@-ms-keyframes cssload-spin {
100%{ -ms-transform: rotate(360deg); transform: rotate(360deg); }
}
@-webkit-keyframes cssload-spin {
100%{ -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}
@-moz-keyframes cssload-spin {
100%{ -moz-transform: rotate(360deg); transform: rotate(360deg); }
}
4. Add js file on footer
jQuery( window ).on( 'load', function($) {
setTimeout( function() {
jQuery('.cssload-container').parent().fadeOut("slow");
}, 1 );
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment