Decent CSS Spin Loader

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<script type="text/javascript">
  $(document).ready(function(){
    // alert();
    setTimeout(function() {
                $('#divLoader').fadeOut('slow');
                $('#loader_container').fadeOut('slow');
            }, 100);
  });


</script>

 <style type="text/css">

/* CSS LOADER*/

#loader {
    border: 16px solid #f3f3f3;
    border-radius: 50%;
    border-top: 16px solid #3498db;
    width: 120px;
    height: 120px;
    -webkit-animation: spin 2s linear infinite;
    animation: spin 2s linear infinite;
}

#divLoader {
    position: absolute;
    top: 40%;
    left: 45%;
    z-index: 99999;
}

@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
    }
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

  #loader_container {
    width: 100%;
    height: 100%;
    /* border: 5px solid blue; */
    display: inline-block;
    position: absolute;
    background-color: rgba(70, 67, 67, 0.84);
    z-index: 9998;
    /*display: none;*/
}

.pleasewait {
    font-size: 19px;
    color: #3498db !important;
    margin-top: 10px;
    text-align: center;
}
</style>

<div id="loader_container" stylle=""><div id="divLoader" style=""><div id="loader" class="loader">&nbsp;</div><p class="pleasewait">Loading <br> Please wait... </p></div></div>