How to add css loader to your html website. And call it any where.

A CSS loader is a graphical representation of an ongoing process, such as data loading or page loading, that helps to give users visual feedback and prevent them from thinking the page has stalled. In this blog, we will go through the steps of adding a CSS loader to an HTML page using HTML, CSS, and JavaScript.

Step 1: Create the HTML Structure The first step is to create the HTML structure of the loader. We will create a container div with a class of "loader-container" and an inner div with a class of "loader".

   

   <div class="loader-container">

     <div class="loader"></div>

   </div>

   

 

Step 2: Add the CSS Styles Next, we will add the CSS styles for the loader. We will use CSS animations to create the loading animation. The keyframes will define the different stages of the animation, and the animation property will define the duration, timing function, and iteration count of the animation.

   

     .loader-container {

  display: flex;

  justify-content: center;

  align-items: center;

  height: 100vh;

}

.loader {

  width: 30px;

  height: 30px;

  border-radius: 50%;

  background-color: #333;

  animation: loader 1s ease-in-out infinite;

}

@keyframes loader {

  0% {

    transform: scale(0);

    opacity: 0.7;

  }

  100% {

    transform: scale(1);

    opacity: 0;

  }

}

   

 

In this CSS code, we have added styles for the loader-container and the loader. We have used flexbox to center the loader in the middle of the page. The loader has a width and height of 30px and a border-radius of 50% to create a circle. The keyframes define the different stages of the animation. In this case, the loader starts as a small circle with an opacity of 0.7 and gradually grows to a larger circle with an opacity of 0.

Step 3: Add JavaScript Functionality Finally, we will add some JavaScript functionality to show and hide the loader based on the user's actions. We will create a function called "showLoader" that will show the loader by adding a class of "show" to the loader-container. We will also create a function called "hideLoader" that will hide the loader by removing the class of "show" from the loader-container.

   

function showLoader() {

  document.querySelector('.loader-container').classList.add('show');

}

function hideLoader() {

  document.querySelector('.loader-container').classList.remove('show');

}

   

 

We can then call these functions as needed in our code. For example, we might call the showLoader function when the user clicks a button to submit a form and call the hideLoader function when the form has been successfully submitted.