页面加载完成前的 loading 效果

<style>
    .preloader {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 99999;

        background: none repeat scroll 0 0 #444;

        display: flex;
        flex-flow: row nowrap;
        justify-content: center;
        align-items: center;
    }

    .spinner {
        width: 45px;
        height: 45px;
        border-radius: 45px;
        border: 1px solid #959595;
        border-top:1px solid  #fff;
        animation: spinner .9s linear infinite;
    }

    @keyframes spinner {
        to {
            transform: rotate(360deg);
        }
    }
</style>
<div class="preloader">
    <div class="spinner"></div>
</div>

<script src="./jquery-1.11.1.min.js"></script>
<script>

    (function ($) {

        "use strict";

        // PRE LOADER
        $(window).load(function () {
            $('.preloader').delay(500).slideUp('slow'); // set duration in brackets
        });

    })(jQuery);
</script>