loading screen

html css js

by Alexandru Gatea

HTML

<div id="loader" class="open">
  <div class="loader-content">
    <p class="loader-text">
      Loading page content
      <span class="progress"></span>
      <span class="dots">
        <span class="dot"></span>
      <span class="dot"></span>
      <span class="dot"></span>
      </span>
    </p>
    <div class="loader-bar"></div>
  </div>
</div>
<div class="page">
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus commodo ut augue a feugiat. Vivamus id enim non nulla dapibus bibendum. Donec finibus consectetur sapien nec mollis. Morbi dapibus fermentum mi, et euismod mi semper laoreet. Morbi iaculis
    euismod tortor. Donec consectetur, orci at viverra efficitur, turpis ligula aliquet sem, et sodales dolor mauris eu urna. Nunc dui turpis, fringilla vel elit non, rhoncus lacinia odio.
  </p>
  <p>
    Proin blandit convallis dictum. Donec iaculis elit ut nulla suscipit, sit amet vehicula ante egestas. Curabitur tempus malesuada maximus. Mauris sodales tortor dolor. Praesent consequat at ante at volutpat. Praesent varius mauris ut enim dignissim convallis.
    Maecenas eu pretium leo.
  </p>
  <p>
    Mauris ornare tempus elit, non ultrices sem rutrum eget. Phasellus in eros vitae arcu euismod feugiat. Vestibulum iaculis pulvinar porta. Cras euismod lacus vel velit iaculis, in ornare erat pretium. Donec eget erat non velit faucibus convallis. Integer
    elementum pellentesque metus, ac posuere turpis pretium ac. Quisque ullamcorper eget libero mattis iaculis.
  </p>


  <p>
    Cras eu nibh faucibus, cursus sapien eu, placerat nisi. Maecenas non metus elit. Quisque laoreet odio vulputate congue tempor. Fusce imperdiet accumsan nisl a viverra. Aliquam ac dui et metus pulvinar consectetur. Nam justo urna, gravida vitae est eu,
    auctor pretium libero. In urna leo, auctor a ex eget, blandit sodales nisl.
  </p>

  <p>
    Quisque a augue fermentum, tristique mauris ac, viverra urna. Nam a pharetra nisi, in ornare ex. Cras pulvinar est...

SCSS

/* browser reset*/

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}


/* imoorts */

@import url('https://fonts.googleapis.com/css?family=Source+Code+Pro:400,700');

/* variables */

$bodybg: #fff;
$pageSpace: 20px;
$loaderBg: #212121;
$loaderTxtColor: rgba(128,203,196 ,1);

/* styles */

body {
  background: $bodybg;
  font-size: 13px;
  &.locked {
    overflow: hidden;
    padding-right:17px;
  }
}

.page {
  padding: $pageSpace;
  p {
    margin-bottom: $pageSpace;
    font-family: sans-serif;
    line-height: 1.5;
    &:last-of-type {
      margin-bottom: 0;
    }
  }
}

#loader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  transiton: all 1s ease;
	
  &:before, &:after {
    content: "";
    position:absolute;
    width: 100%;
    height: 50%;
    display: block;
    background: rgba(0,77,64 ,1);
    left: 0;
		opacity:0;
    z-index: 1001;
		  transition: all 1s ease;
  }
  &:before {
    top:-50%;
		opacity:0;
  }
  &:after {
    bottom: -50%;
  }
  .loader-content {
    opacity: 0;
  }
}

#loader.open {
  position: fixed;
  width: 100%;
  height: 100vh;
  z-index: 1000;
	background: url('https://s-i.huffpost.com/gen/4393678/images/n-THE-MATRIX-628x314.jpg');
	background: url('https://media.giphy.com/media/ch3ZnHcChtSOA/giphy.gif');
	background-size:cover;
	background-position: center center;
	background-repeat:no-repeat;
  &:before,
  &:after {
   		opacity:0.9;
	   transition: all 1s ease;
		 mix-blend-mode: multiply;
  }
  &:before {
    top:0;
  }
  &:after {
    bottom: 0;
  }
  .loader-content {
    position: absolute;
    z-index: 1002;
    width: 100%;
    max-width: 80%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: 'Source Code Pro', monospace;
    opacity: 1;
    .loader-text {
      font-weight: 400;
      color: $loaderTxtColor;
      letter-spacing: 0.5px;
      font-size: 13px;
      margin-bottom: 10px;
			text-shadow: 0px 0px 2px rgba(128,203,196...

JavaScript

jQuery(document).ready(function($) {
  $('body').addClass('locked');


  var count = 0;
  var counting = setInterval(function() {
    if (count < 101) {
      $('.progress').text(count + '%');
      count++
    } else {
      clearInterval(counting)
    }
  }, 50);

  setTimeout(function() {
   $('#loader').removeClass('open');
  }, 8000);
  setTimeout(function() {
    $('body').removeClass('locked');
  }, 8500);
});