Show preloader icon on site

Navigation
0

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

Can you do this? Would I use CSS? Javascript? both? Any light please ...

I'm developing using JSF + Primefaces

    
asked by anonymous 21.02.2018 / 20:04

1 answer

2

You can use CSS + JavaScript. I'll suggest an example that will create an animated preloader similar to Facebook, so 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 have to add the styles in 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 div on the page with the    preloader .

To remove it, just call the code below: 

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

Here's 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>
    
21.02.2018 / 21:02
Password Validation with Python Report Modeling in ASP NET MVC