Você pode usar CSS + JavaScript. Vou sugerir um exemplo que irá criar um preloader animado semelhante ao do Facebook, que você poderá customizar o tamanho e as cores. Ele deverá aparecer fixo no centro da tela e sobre todo o conteúdo da página.
Primeiro é preciso adicionar os estilos no CSS:
.preloader {
width: 50px;
height: 40px;
position: fixed;
z-index: 999;
top: 50%;
margin-top: -20px;
left: 50%;
margin-left: -25px;
}
.preloader div {
background-color: red; /*cor das barras*/
height: 100%;
width: 6px;
display: inline-block;
margin: 0 1px;
-webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out;
animation: sk-stretchdelay 1.2s infinite ease-in-out;
}
.preloader .rect2 {
-webkit-animation-delay: -1.1s;
animation-delay: -1.1s;
}
.preloader .rect3 {
-webkit-animation-delay: -1.0s;
animation-delay: -1.0s;
}
.preloader .rect4 {
-webkit-animation-delay: -0.9s;
animation-delay: -0.9s;
}
.preloader .rect5 {
-webkit-animation-delay: -0.8s;
animation-delay: -0.8s;
}
@-webkit-keyframes sk-stretchdelay {
0%, 40%, 100% { -webkit-transform: scaleY(0.4) }
20% { -webkit-transform: scaleY(1.0) }
}
@keyframes sk-stretchdelay {
0%, 40%, 100% {
transform: scaleY(0.4);
-webkit-transform: scaleY(0.4);
} 20% {
transform: scaleY(1.0);
-webkit-transform: scaleY(1.0);
}
}
Em seguida, você deve chamar o código abaixo quando quiser mostrá-lo:
var pre_src = '<div class="rect1"></div>'
+'<div class="rect2"></div>'
+'<div class="rect3"></div>'
+'<div class="rect4"></div>'
+'<div class="rect5"></div>';
var div = document.createElement("div");
div.setAttribute("class","preloader");
document.body.appendChild(div);
document.body.querySelector(".preloader").innerHTML = pre_src;
O código acima cria de forma dinâmica a div
na página com o
preloader.
Para removê-lo, basta chamar o código abaixo:
document.body.querySelector(".preloader").outerHTML = '';
Veja abaixo um exemplo hipotético de como funciona:
function pre(i){
if(i == 1) {
var pre_src = '<div class="rect1"></div>'
+'<div class="rect2"></div>'
+'<div class="rect3"></div>'
+'<div class="rect4"></div>'
+'<div class="rect5"></div>';
var div = document.createElement("div");
div.setAttribute("class","preloader");
document.body.appendChild(div);
document.body.querySelector(".preloader").innerHTML = pre_src;
}else{
document.body.querySelector(".preloader").outerHTML = '';
}
}
.preloader {
width: 50px;
height: 40px;
position: fixed;
z-index: 999;
top: 50%;
margin-top: -20px;
left: 50%;
margin-left: -25px;
}
.preloader div {
background-color: red; /*cor das barras*/
height: 100%;
width: 6px;
display: inline-block;
margin: 0 1px;
-webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out;
animation: sk-stretchdelay 1.2s infinite ease-in-out;
}
.preloader .rect2 {
-webkit-animation-delay: -1.1s;
animation-delay: -1.1s;
}
.preloader .rect3 {
-webkit-animation-delay: -1.0s;
animation-delay: -1.0s;
}
.preloader .rect4 {
-webkit-animation-delay: -0.9s;
animation-delay: -0.9s;
}
.preloader .rect5 {
-webkit-animation-delay: -0.8s;
animation-delay: -0.8s;
}
@-webkit-keyframes sk-stretchdelay {
0%, 40%, 100% { -webkit-transform: scaleY(0.4) }
20% { -webkit-transform: scaleY(1.0) }
}
@keyframes sk-stretchdelay {
0%, 40%, 100% {
transform: scaleY(0.4);
-webkit-transform: scaleY(0.4);
} 20% {
transform: scaleY(1.0);
-webkit-transform: scaleY(1.0);
}
}
<input type="button" value="Mostrar preloader" onclick="pre('1')">
<input type="button" value="Esconder preloader" onclick="pre('0')">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi interdum aliquet porta. Maecenas et metus dui. Nullam euismod justo nec diam malesuada rutrum id id nisi. Fusce commodo mollis dui sit amet ultricies. Sed pretium est quis massa aliquam viverra. Aenean sit amet vulputate mauris, eget ultricies diam. Pellentesque scelerisque fringilla tristique. Maecenas venenatis, turpis ut gravida porta, dui ante cursus dolor, eu scelerisque odio diam id nunc. Suspendisse sed ex sed mi pretium ultrices.
</p>
<p>
Vivamus quis enim at nibh pharetra iaculis. Donec sapien augue, lobortis ut turpis ac, hendrerit dapibus libero. Aliquam porta, ex quis suscipit convallis, nunc tortor accumsan nulla, nec ornare nisl enim vel metus. Nam tempus ipsum quam, at tempus nunc tempor a. Donec suscipit, enim sit amet venenatis consectetur, leo eros sagittis velit, eget pharetra purus neque non urna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tristique auctor sapien nec dictum.
</p>
beforeSEND
, o mesmo ficará rodando, quando o documento estiver pronto oculte o gif.