Show preloader icon on site

Question

I have a login registration page that calls a registration confirmation page, in case the person has to open the email, pick up the code received and set this registration confirmation page. The problem is that it takes a significant amount of time to call the email confirmation screen, so I wanted one of those preloader icons to keep running until I called the other page. This would be done after clicking the sign up user button. Then it would appear the "icon" running.

How do I do that? Would I use CSS? Javascript? both? Any light please...

I am developing using JSF + Primefaces

Answer 1

You can use CSS + Javascript. I will suggest an example that will create an animated preloader similar to Facebook, which you can customize the size and colors. It should appear fixed in the center of the screen and over the entire contents of the page.

First you need to add styles to the 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);
  }
}

Then you should call the code below when you want to show it:

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;

The above code dynamically creates the div on the page with the preloader.

To remove it, just call the code below:

document.body.querySelector(".preloader").outerHTML = '';

Below is a hypothetical example of how it works:

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>