HTML code
Copy, paste, change, customize and run the following HTML code to get a result like the one shown in the preview selection
<div class="pageloader gray-bg">
<div class="loader">
<span>Bootdey</span>
<div class="sp-hydrogen"></div>
</div>
</div>
<div class="container bootstrap snippets">
<div class="jumbotron">
<h1 id="loading-text">Loading...</h1>
</div>
</div>
CSS code
Copy, paste, change, customize and run the following CSS code to get a result Like the one shown in the preview selection
body{
margin-top:20px;
}
.gray-bg{
background:#eee;
}
.pageloader {
position: fixed;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
z-index: 1000000;
opacity:1;
overflow: hidden;
display: table;
}
.loader {
text-align: center;
display: table-cell;
vertical-align: middle;
}
.loader span{
color: #1ABC9C;
font-weight: 300;
font-size: 60px;
display: block;
margin-top: 40px;
}
.sp-hydrogen {
width: 96px;
height: 96px;
clear: both;
margin: 60px auto;
position: relative;
border: 3px #1ABC9C solid;
border-radius: 50%;
-webkit-animation: spHydro 0.7s infinite linear;
animation: spHydro 0.7s infinite linear;
}
.sp-hydrogen:before, .sp-hydrogen:after {
content: '';
position: absolute;
width: 30px;
height: 30px;
background-color: #252830;
border-radius: 50%;
}
.sp-hydrogen:before {
top: calc( 50% - 15px );
left: calc( 50% - 15px );
}
.sp-hydrogen:after {
top: -3px;
left: -3px;
}
@-webkit-keyframes spHydro {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(359deg);
}
}
@keyframes spHydro {
from {
transform: rotate(0deg);
}
to {
transform: rotate(359deg);
}
}
.animated {
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
.animated.infinite {
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
@-webkit-keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.fadeIn {
-webkit-animation-name: fadeIn;
animation-name: fadeIn;
}
@-webkit-keyframes fadeOut {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@keyframes fadeOut {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
.fadeOut {
-webkit-animation-name: fadeOut;
animation-name: fadeOut;
}
Javascript/Jquery code
Copy, paste, change, customize and run the following JS code to get a result Like the one shown in the preview selection
$(function(){
$(window).load(function() {
//on production change 3000 to 500
$('.pageloader').delay(3000).slideUp(800);
$("#loading-text").addClass('text-success').html('page loaded');
})
})
Similar snippets
About this snippet
Rated 5/5
based on 3 reviews