Cacher is the code snippet organizer for pro developers

//HTML
<div class="preloader d-flex justify-content-center align-items-center">
    <div class="spinner-grow text-danger" role="status">
        <span class="sr-only">Loading...</span>
    </div>
</div>
<!-- /.preloader -->

//CSS
.spinner-grow {
    width: 10rem;
    height: 10rem;
}

.preloader {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10000;
    background-color: #fefefe;
}

//JS
$(function () {
    $(window).on('load', function () {
        $('.preloader').delay(500).fadeOut('slow', function () {
            $(this).attr('style', 'display: none !important');
        });
    });
});