//HTML
<div class="loading">
  <div class="loading-wrap">
    <p>Now Loading</p>
  </div>
</div>
<div class="loading-after">
  <p>ローディングが完了しました</p>
</div>


//css
.loading{
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: #000;
    z-index: 9000;
}
.loading-wrap{
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 9999;
}
.loading-wrap p{
    color:#fff;
    font-size: 40px;
}
.loading-after p{
    font-size: 40px;
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%);
}


//jQuery
$(window).on('load', function(){
    $('.loading').delay(900).fadeOut(800);
});
$(function(){
    setTimeout('stopload()', 10000);
})
function stopload(){
    $('.loading').delay(900).fadeOut(800);
}