<div id="loader">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>
#loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
  
    &>div {
      width: 100%;
      height: 12.5%;
      background: blueviolet;
      transition: transform 500ms;
    }
  
    @for $i from 1 through 8 { 
        &>div:nth-child(#{$i}) {
            transition-delay: $i * 100ms;
        }
    }
}

body:not(.hidden).reveal #loader>div {
    transform: translateX(-100%)
}
View Compiled 
setTimeout(() => {
    document.body.classList.add("reveal")
}, 1000),
document.addEventListener("click", () => {
    document.body.classList.toggle("reveal")
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.