Bootstrap Snippet Loading Page using HTML CSS Bootstrap Javascript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<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">
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
@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;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
$(window).load(function() {
    $(".bg_load").fadeOut("slow");
    $(".wrapper").fadeOut("slow");
})
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Loading Page"
Bootstrap 3.3.0 Snippet by kirankumar095

Related: See More

Questions / Comments:

"Loading Page" Bootstrap 3.3.0 Snippet by kirankumar095

Related: See More

Questions / Comments:

"Loading Page"
Bootstrap 3.3.0 Snippet by kirankumar095