"Loading Page"
Bootstrap 3.3.0 Snippet by rodrigockamarante

<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"); })

Related: See More


Questions / Comments: