page animation load

by Axelvaisper

HTML

<div id="loader-wrapper">
  <div class="loader-section section-left"></div>
  <div class="loader-section section-right"></div>

</div>

<div id="content">
  <h1>Page Loaded!</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto expedita perspiciatis id explicabo ut excepturi repudiandae iure optio similique facilis recusandae ratione pariatur quod consectetur doloribus laboriosam esse obcaecati eius velit veniam
    reprehenderit quam, necessitatibus ducimus quidem. Neque deserunt quis ex cupiditate itaque, dolorem consectetur ratione, accusantium quibusdam modi ea at sint iste quod aspernatur?</p>
</div>

CSS

/* Demo Styles */
#content {
  margin: 0 auto;
  padding-bottom: 50px;
  width: 80%;
  max-width: 978px;
}

h1 {
  font-size: 40px;
}

/* The Loader */
#loader-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
  overflow: hidden;
}
.no-js #loader-wrapper {
  display: none;
}

#loader-wrapper .loader-section {
  position: fixed;
  top: 0;
  width: 51%;
  height: 100%;
  background: #2b303b;
  z-index: 10;
}

#loader-wrapper .loader-section.section-left {
  left: 0;
}

#loader-wrapper .loader-section.section-right {
  right: 0;
}

/* Loaded styles */
.js_load #loader-wrapper .loader-section.section-left {
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
  -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.js_load #loader-wrapper .loader-section.section-right {
  -webkit-transform: translateX(100%);
  transform: translateX(100%);
  -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.js_load #loader-wrapper {
  visibility: hidden;
  -webkit-transform: translateY(-100%);
  transform: translateY(-100%);
  -webkit-transition: all 0.3s 1s ease-out;
  transition: all 0.3s 1s ease-out;
}

JavaScript

$(document).ready(function() {
 
    setTimeout(function() {
        $('body').addClass('js_load');
    }, 500);
 
});