Lo que estas buscando es mas conocido como precarga
o pre-loader
, y te cuento que es posible hacerse sin Javascript, unicamente con CSS, gracias a todas las posibilidades de CSS3 como los @keyframes
nos permiten hacer esto.
Te dejo el codigo:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-size: 16px;
font-family: "Montserrat";
}
body {
max-height: 100vh;
overflow: hidden;
}
header h1 {
font-size: 2rem;
text-transform: uppercase;
padding: 1rem;
}
.container {
width: 100%;
height: auto;
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.container p {
width: 50%;
text-align: justify;
}
.loader {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
background-color: #000;
display: flex;
justify-content: center;
align-items: center;
animation: cargar 1s forwards;
animation-delay: 9s;
overflow: hidden;
}
.loader p {
color: #fff;
text-transform: uppercase;
letter-spacing: 2px;
font-size: 5rem;
}
.loader p span {
font-size: 5rem;
letter-spacing: 3px;
position: relative;
}
.loader p span:nth-child(1) {
animation: punto1 1s infinite;
}
.loader p span:nth-child(2) {
animation: punto2 1s infinite;
animation-delay: 0.3s;
}
.loader p span:nth-child(3) {
animation: punto3 1s infinite;
animation-delay: 0.6s;
}
@keyframes cargar {
0% {
height: 100%;
}
100% {
height: 0;
bottom: auto;
}
}
@keyframes punto1 {
0% {
top: 0;
}
50% {
top: -25px;
}
100% {
top: 0;
}
}
@keyframes punto2 {
0% {
top: 0;
}
50% {
top: -25px;
}
100% {
top: 0;
}
}
@keyframes punto3 {
0% {
top: 0;
}
50% {
top: -25px;
}
100% {
top: 0;
}
}
<header>
<h1>Logo</h1>
</header>
<div class="container">
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ex, sequi, excepturi quibusdam facilis a architecto omnis cum beatae nostrum sint facere quaerat, eaque dolorem tempora cupiditate veniam. Culpa deleniti dolorum inventore perferendis odit eius ducimus iste rem nisi similique quidem, quae quis adipisci minima tenetur temporibus iure quibusdam pariatur quam!</p>
</div>
<div class="loader">
<p>cargando<span>.</span><span>.</span><span>.</span></p>
</div>
Eso si ten en cuenta por favor, que si deseas que solo cargue en el Home, o que cargue solamente cuando el contenido de la pagina haya cargado por completo, ahi si necesitaras hacer uso de Javascript o Jquery, poniendo las animaciones dentro de una clase en especifico y agregandoselas o quitandoselas de manera dinamica, como por ejemplo
<body class="width-loader"></body>
Y con el Javascript le quitamos la clase cuando el documento este totalmente cargado, tal que asi:
$(document).ready(function(){
$("body").removeClass("with-loader");
});
En definitiva puedes hacer un pre-load solamente con CSS, pero si quieres algo mas avanzado te tocara aprender un poco de Javascript
Saludos !