<body>
  <div id="containerLoader" class="containerLoader">
    <div class="lds-ripple">
      <div></div>
      <div></div>
    </div>
  </div>
  <div class="containerText">
    <h1>I'm the title</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque tincidunt rhoncus mattis. Quisque suscipit urna dui, a mollis diam venenatis sed. Pellentesque ligula neque, convallis ut laoreet id, mollis accumsan tortor. Donec neque metus, facilisis eget finibus non, molestie sed orci. Etiam tortor erat, pulvinar at rutrum quis, laoreet id neque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Integer sagittis, sem ut ullamcorper hendrerit, est diam pretium libero, vitae bibendum nisl libero nec sem. Curabitur gravida erat consectetur ante congue congue. Praesent rhoncus at ligula lobortis volutpat. Morbi nec vulputate mauris. In accumsan felis ut ligula fermentum laoreet.</p>

    <p>
  Fusce id auctor est, ut varius massa. Aenean vitae mi maximus, faucibus erat et, sagittis mauris. Curabitur a aliquam eros, in faucibus diam. Cras rhoncus non tellus vel lacinia. Sed sagittis ligula ultricies luctus tristique. Maecenas tristique, augue in ultricies ornare, est lacus rutrum tellus, sed volutpat leo purus in felis. Phasellus facilisis hendrerit interdum. Donec quis ex non leo commodo sagittis. Praesent eget ligula et lectus euismod dapibus. Phasellus tempor augue non mollis euismod.</p>
  <p>
  Vestibulum auctor molestie lectus quis faucibus. Sed eleifend pharetra ipsum, quis vehicula ipsum malesuada non. Maecenas quis rutrum libero. Pellentesque tincidunt est feugiat justo viverra, ut bibendum arcu mattis. Nulla tincidunt convallis nulla, sit amet egestas justo pulvinar eget. Ut quis leo ornare, venenatis eros eu, laoreet ligula. In quis lectus erat. Suspendisse potenti. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut aliquam convallis malesuada. Morbi faucibus quis dui eu tincidunt. Vivamus a ipsum ac ipsum consequat venenatis. Mauris feugiat eget nisl in consequat. Nulla auctor turpis sit amet dui viverra fermentum. Nulla nec lorem quis quam maximus rutrum.
  </p>
   <p>
  Nam quis gravida mauris. In interdum metus ac purus molestie vulputate. Curabitur at hendrerit velit. Quisque et sagittis felis. Etiam vel interdum nisl. Fusce pretium aliquam velit ac lacinia. Phasellus vulputate, sem et elementum finibus, ligula dolor varius eros, in scelerisque magna ipsum condimentum turpis. Pellentesque sodales tempus lacinia. Aenean eu mauris tellus. Cras magna nunc, tristique sed accumsan ac, congue vitae ipsum. In dapibus eu dui elementum dapibus. Proin quis justo eget leo mattis gravida ut et lorem. Vestibulum ac viverra leo.</p>
<p>
  Aliquam blandit leo gravida nibh fermentum mattis. Integer malesuada ipsum quis erat dictum, et luctus massa aliquet. Cras varius nisl quis vulputate convallis. Curabitur ex urna, ultricies ut mi vitae, dignissim sollicitudin tellus. Vestibulum ultrices justo quis felis semper, vel aliquam arcu lobortis. Donec laoreet purus sed sodales consequat. Vivamus ut commodo lorem. Cras vitae dignissim libero. Mauris sit amet dictum lectus, quis sagittis augue. Aliquam convallis lacus at tellus tincidunt, eu efficitur lorem posuere. Aliquam erat volutpat. Nullam molestie sapien felis. Vestibulum fringilla, sapien quis imperdiet accumsan, turpis ligula sodales tellus, in rhoncus ex nisi nec ex. Nam ante mauris, vulputate eu sodales vel, dignissim at ipsum. Curabitur lacinia nunc nec mollis vehicula.</p>
  </div>
</body>

// Fonts
@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');

// Variables
$background:  #252525;

// Style
body{
  background: #252525;
  color: white;
  font-family: 'Roboto', sans-serif;
  margin: 0 5% 0 5%;
}

::-moz-selection {
  background: rgb(255 255 255 / 22%);
}
::selection {
  background: rgb(255 255 255 / 22%);
}

.containerText{
  display: block;
  margin: 0 auto;
  width: 900px;
  max-width: 90%;
  & p{
    text-align: justify;
  }
  & h1{
    text-align: center;
  }
} 
@keyframes hide {
  from {
    opacity: 1;
  }
  to {
    opacity: 0; 
    display: none;
  }
}
.hide{
  animation: hide 1s;
  animation-iteration-count: 1;
}
#containerLoader{
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  display: block;
  background: black;
  & .lds-ripple {
    display: inline-block;
    position: relative;
    width: 80px;
    height: 80px;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    & div{
      position: absolute;
    border: 4px solid #fff;
    opacity: 1;
    border-radius: 50%;
    animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
      &:nth-child(2) {
        animation-delay: -0.5s;
      }
    }
  }
}

@keyframes lds-ripple {
  0% {
    top: 36px;
    left: 36px;
    width: 0;
    height: 0;
    opacity: 1;
  }
  100% {
    top: 0px;
    left: 0px;
    width: 72px;
    height: 72px;
    opacity: 0;
  }
}
View Compiled
document.onreadystatechange = () => {
  if (document.readyState === 'complete') {
    document.getElementById("containerLoader").classList.add('hide'); 
  
    setTimeout(function(){ 
      document.getElementById("containerLoader").style.display = 'none';
    }, 1000);
  }
};
  

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.