Loader CSS + Jquery

Loader CSS + Jquery

by José Luis Rojo

HTML

<div class="outer-loader">
  <div class="inner-loader-css">
  </div>
</div>

SCSS

.outer-loader {
    width: auto;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    // page loader full css
    .inner-loader-css {
        border: 16px solid hsl(0, 0%, 5%); 
        border-top: 16px solid hsl(0, 0%, 43%); 
        border-radius: 50%;
        width: 100px;
        height: 100px;
        animation: spin 1.5s linear infinite;
    }
    @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
    } 
}

JavaScript

$(window).on('load', function() {
  $('.outer-loader').delay(1000).fadeOut('slow');
});