Pre Loader

by JQ Purfect

HTML

<script src="http://fonts.googleapis.com/css?family=Source+Sans+Pro:200&#39;"></script>
<div class="preload">
    <img src="http://cdn.cfo.com/content/uploads/2014/01/128px-General_Electric_logo.svg_.png" />
    <p>loading contents, please wait...</p>
</div>
<div class="content">
    <h1>Content Area</h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sodales sit amet mauris et scelerisque. Donec auctor mi quis elit venenatis lacinia. Quisque non turpis magna. Maecenas porttitor lectus mi, eget fermentum risus accumsan nec. Aenean sodales consequat scelerisque. Maecenas blandit nisi quis pharetra finibus</div>

CSS

body {
    font-family:'Source Sans Pro', sans-serif;
    font-size: 10pt;
}
.content {
    display:none;
    font-size: 12pt;
    padding: 10pt;
    background: yellow;
}

.content h1 {
    font-size: 18pt;
    padding-bottom: 5px;
}
.preload {
    width:200px;
    height: 100px;
    position: fixed;
    top: 30%;
    left: 45%;
    text-align: center;
}

JavaScript

$(function () {
    $(".preload").fadeOut(3000, function () {
        $(".content").fadeIn(1000);
    });
});