로딩바 만들기

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<style>
    #loading {
        width: 100vw;
        height: 40vw;
        top: 0;
        left: 0;
        position: fixed;
        display: block;
        opacity: 0.7;
        background-color: #fff;
        z-index: 99;
        text-align: center;
    }

    #loading-image {
        position: absolute;
        z-index: 100;
        width:80vw;
        height: 40vw;
        margin-left:-40vw;
    }
</style>
<style>
    #loading {
        height: 150vw;
    }
    #loading-image{
        margin-top: 60pt;
        height: 200pt;
        width: 400pt;
    }
</style>

<script type="text/javascript">
    window.onbeforeunload = function () { $('#loading').show(); }  //현재 페이지에서 다른 페이지로 넘어갈 때 표시
    $(window).load(function () {          //페이지가 로드 되면 로딩 화면을 없애줌
        $('#loading').hide();
    });
</script>