<link rel="stylesheet" href="loading.css"/>
<div class="loader-fullscreen-wrapper">
<div class="loader-fullscreen">
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
</div>
</div>
<script>
function hideLoader( ){
document.querySelector( 'div.loader-fullscreen-wrapper' ).style.display = 'none';
}
function showLoader( ){
document.querySelector( 'div.loader-fullscreen-wrapper' ).style.display = 'initial';
}
window.addEventListener( 'load',hideLoader );
</script>
<link rel="stylesheet" href="loading.css"/>
<div class="loader">
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
</div>
(If you have multiple loaders at the same time, give them Ids and adjust the querySelector.)
<script>
function hideLoader( ){
document.querySelector( 'div.loader' ).style.display = 'none';
}
</script>