0

Tenho uma página de cadastro de login que chama uma página de confirmar cadastro, no caso a pessoa tem que abrir o email, pegar o código recebido e setar nessa página de confirmação de cadastro. O problema é que leva um tempo significativo para chamar a tela de confirmar email, então queria um daqueles ícones de preloader pra ficar rodando até chamar a outra página. Isso seria feito depois de clicar no botão cadastrar usuário. Aí apareceria o "ícone" rodando.

Tem como fazer isso? Eu usaria CSS? Javascript? os dois? Alguma luz por favor...

Estou desenvolvendo utilizando JSF + Primefaces

3
  • Só a animação do Loader vc pode fazer com CSS, SVG etc é isso que vc precisa?
    – hugocsl
    Commented 21/02/2018 às 19:12
  • estás usando Ajax? se sim, faça a chamada de um gif de loading em beforeSEND, o mesmo ficará rodando, quando o documento estiver pronto oculte o gif. Commented 21/02/2018 às 19:25
  • No site do primefaces tem essa tela de load
    – LR10
    Commented 21/02/2018 às 19:32

1 Resposta 1

2

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>

2
  • Que sistema legal cara, nem imaginava como funcionava. Funciona em todos os navegadores?
    – RpgBoss
    Commented 22/02/2018 às 0:36
  • Testei apenas no IE 11 e funcionou.
    – Sam
    Commented 22/02/2018 às 0:43

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .