<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<!-- Portfolio Item Row -->
<div class="row">
<div class="col-md-6">
<img class="img-responsive" src="http://www.hdwallpapers.in/download/ferrari_f12_berlinetta-1900x1080.jpg" alt="">
</div>
<div class="col-md-6">
<h3>Loading Site</h3>
<p>How to use jQuery and CSS to show loading image while page loading.</p>
<h3>References</h3>
<ul>
<li>Template by <a href="http://startbootstrap.com/template-overviews/portfolio-item">Start Bootstrap</a>.</li>
<li>Images by <a href="http://www.hdwallpapers.in">HD Wallpapers</a></li>
<li>Loading animation by <a href="http://tympanus.net/codrops/author/hugogiraudel">Hugo Giraudel</a> in <a href="http://tympanus.net/codrops/2012/11/14/creative-css-loading-animations/">Codrops</a>.</li>
</ul>
</div>
</div>
<!-- Related Projects Row -->
<div class="row">
<div class="col-lg-12">
<h3 class="page-header">HD Images</h3>
</div>
<div class="col-sm-3 col-xs-6">
<a href="#"><img class="img-responsive portfolio-item" src="http://www.hdwallpapers.in/download/mc_customs_wide_body_ferrari_f12berlinetta-1900x1080.jpg" alt=""></a>
</div>
<div class="col-sm-3 col-xs-6">
<a href="#"><img class="img-responsive portfolio-item" src="http://www.hdwallpapers.in/download/ferrari_fxx_k_2015-1900x1080.jpg" alt=""></a>
</div>
<div class="col-sm-3 col-xs-6">
<a href="#"><img class="img-responsive portfolio-item" src="http://www.hdwallpapers.in/download/lamborghini_gallardo_tikore-1900x1080.jpg" alt=""></a>
</div>
<div class="col-sm-3 col-xs-6">
<a href="#"><img class="img-responsive portfolio-item" src="http://www.hdwallpapers.in/download/mansory_lamborghini_huracan_1000_hp-1900x1080.jpg" alt=""></a>
</div>
</div>
<!-- /.row -->
<hr>
</div>
<div class="bg_load"></div>
<div class="wrapper">
<div class="inner">
<span>L</span>
<span>o</span>
<span>a</span>
<span>d</span>
<span>i</span>
<span>n</span>
<span>g</span>
</div>
</div>
@import url(https://fonts.googleapis.com/css?family=Racing+Sans+One);
body {
background: #EEE;
}
.bg_load {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
background: #EEE;
}
.wrapper {
/* Size and position */
font-size: 25px; /* 1em */
width: 8em;
height: 8em;
position: fixed;
left: 50%;
top: 50%;
margin-top: -100px;
margin-left: -100px;
/* Styles */
border-radius: 50%;
background: rgba(255,255,255,0.1);
border: 1em dashed rgba(138,189,195,0.5);
box-shadow:
inset 0 0 2em rgba(255,255,255,0.3),
0 0 0 0.7em rgba(255,255,255,0.3);
animation: rota 3.5s linear infinite;
/* Font styles */
font-family: 'Racing Sans One', sans-serif;
color: #444;
text-align: center;
text-transform: uppercase;
text-shadow: 0 .04em rgba(255,255,255,0.9);
line-height: 6em;
}
.wrapper:before,
.wrapper:after {
content: "";
position: absolute;
z-index: -1;
border-radius: inherit;
box-shadow: inset 0 0 2em rgba(255,255,255,0.3);
border: 1em dashed;
}
.wrapper:before {
border-color: rgba(138,189,195,0.2);
top: 0; right: 0; bottom: 0; left: 0;
}
.wrapper:after {
border-color: rgba(138,189,195,0.4);
top: 1em; right: 1em; bottom: 1em; left: 1em;
}
.wrapper .inner {
width: 100%;
height: 100%;
animation: rota 3.5s linear reverse infinite;
}
.wrapper span {
display: inline-block;
animation: placeholder 1.5s ease-out infinite;
}
.wrapper span:nth-child(1) { animation-name: loading-1; }
.wrapper span:nth-child(2) { animation-name: loading-2; }
.wrapper span:nth-child(3) { animation-name: loading-3; }
.wrapper span:nth-child(4) { animation-name: loading-4; }
.wrapper span:nth-child(5) { animation-name: loading-5; }
.wrapper span:nth-child(6) { animation-name: loading-6; }
.wrapper span:nth-child(7) { animation-name: loading-7; }
@keyframes rota {
to { transform: rotate(360deg); }
}
@keyframes loading-1 {
14.28% { opacity: 0.3; }
}
@keyframes loading-2 {
28.57% { opacity: 0.3; }
}
@keyframes loading-3 {
42.86% { opacity: 0.3; }
}
@keyframes loading-4 {
57.14% { opacity: 0.3; }
}
@keyframes loading-5 {
71.43% { opacity: 0.3; }
}
@keyframes loading-6 {
85.71% { opacity: 0.3; }
}
@keyframes loading-7 {
100% { opacity: 0.3; }
}
$(window).load(function() {
$(".bg_load").fadeOut("slow");
$(".wrapper").fadeOut("slow");
})
