how to use page loaders on your web pages using javascript

05/09/2020    By: christoper unum







Using page loaders on your website makes your site looks more professional, it tells your site users to wait while tasks are loading. In this tutorial, We will learn how to use page loaders using JavaScript. Click on the Add Images button above to display the end result of this tutorial.

Prerequisite

Basic knowledge of Html, CSS, and JavaScript is required to fully understand the concepts in this tutorial.

Html

To demonstrate our page loader, we will be loading 4 images from an online server. In our Html code, we will create a container that will house the images to be loaded from the server and a loader container that houses the loader as shown below

<div id="board">
  <div id="loader-container">
    <center><div class="spinner-border text-primary loader"></div></center>
  </div>
  <div id="images-container">
    <!--
    <div id="image-out">
      <div id="image-in">
        <img src="images/image10.jpg" />
      </div>
    </div>
  -->
  </div>
  <button id="add-image">Add Image</button>
</div>

css

The loader we will be using in this tutorial will be obtained from Bootstrap 4. To use this loader you need to add the CDN link below in the head tag of your web page

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">

Now we add styles to our Html code

body {
  font-family"Fira Sans"sans-serif;
}

#board{
  margin20px auto;
  max-width:600px;
  position:relative;
}
#loader-container{
  position:absolute;
  width:100%;
  height:100%;
  background:white;
  display:none;
}

#image-out{
  display:inline-block;
  width:49%;
  margin:2px 0;
}
#image-in{
  width:98%;
  margin:0 auto;
}
#image-in img{
  width:100%;
}
#add-image{
  bordernone;
  padding5px 12px;
  margin20px 0;
  background#004B92;
  colorwhite;
  cursorpointer;
}

@media only screen and (max-width:390px){
  #image-out{
    width:100%;
  }
}

JavaScript

Our JavaScript code turns the loader on using the onLoader() method, loads four images using the addImage() method, and then turns off the loader using the offLoader() method when you click on the Add Images Button.

//an array of images
const images = ['images/image1.jpg','images/image2.jpg','images/image3.jpg','images/image4.jpg','images/image5.jpg','images/image6.jpg','images/image7.jpg','images/image8.jpg','images/image9.jpg','images/image10.jpg'];
//add a click listener to the Add Images Button
document.querySelector("#add-image").addEventListener("click", () => {
  onLoader();
  setTimeout(() => {
    addImage(images[9]);
    addImage(images[7]);
    addImage(images[5]);
    addImage(images[4]);
    offLoader();
  }, 3000);
  
});

//loads an image
const addImage = (url) => {
  let imageOut = document.createElement("div");
  imageOut.setAttribute("id","image-out");
  let imageIn = document.createElement("div");
  imageIn.setAttribute("id","image-in");
  let img = document.createElement("img");
  img.src=url;
  imageIn.appendChild(img);
  imageOut.appendChild(imageIn);
  document.querySelector("#images-container").appendChild(imageOut);
};
//turns on the loader
const onLoader = () => {
  document.querySelector("#loader-container").style.display = "block";
};
//turns off the loader
const offLoader = () => {
  document.querySelector("#loader-container").style.display = "none";
};

Conclusion

Using page loaders has to do with timing. JavaScript code is read line by line, you can turn on the loader just before a task that takes long to load and turn off after it has finish loading.



Recent Posts

blog image
blog image
blog image

Our Newsletters