글쓰기와 코멘트 쓰기를 할때 로딩페이지를 넣으려고 합니다.

어떻게 넣어야 할까요.?

<!-- 스타일 { -->
<style>
    /* 로딩전 화면을 가리기 위한 꼼수 */
    #loadings {
        position: fixed;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        background-color: #ffffff;
        z-index: 999999;
    }
    
    /* 로더 */
    #loading_api {
        position: absolute;
        width: 50px;
        height: 50px;
        border: 2px solid rgba(0, 0, 0, .1); /* 컬러 */
        border-radius: 50%;
        border-top-color: #0099ff; /* 컬러 */
        animation: spin 1s ease-in-out infinite;
        -webkit-animation: spin 1s ease-in-out infinite;
        margin: auto;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
    }
    
    /* 로더 애니메이션 */
    @keyframes spin {
        to {
            -webkit-transform: rotate(360deg);
        }
    }

    @-webkit-keyframes spin {
        to {
            -webkit-transform: rotate(360deg);
        }
    }
</style>

<!-- 아래 제이쿼리는 그누보드/영카트의 경우 로드되어 있으니 빼주시면 됩니다. { -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<!-- } -->

<!-- 로더 시작 { -->
<div id="loadings">
    <div id="loading_api"></div>
</div>

<script>
    
    // DOM을 포함한 페이지가 준비가 되면 사라집니다.
    $(window).on("load", function() {
        $('#loadings').fadeOut(500);
    });

    // 좀 더  늦게 사라지게 할 경우 아래코드 사용
    // setTimeout(function() { 의 500 숫자로 조절가능
    /*
    $(window).on("load", function() {
        setTimeout(function() {
            $('#loading').fadeOut(500);
        }, 500);
    });
    */
    
</script>
<!-- } 로더 끝 -->