Creating a Loader and Remove it After a Specific Time Using JavaScript

In this guide, we would create a loader, and remove it after a specific time using CSS and JavaScript.

The icon would be in SVG format, and the rotation would be done in CSS, while the removal after a specific time would be implemented in JavaScript.

First, download any SVG loader icon, there are thousands of them on the web, so, I won't include that here.

Table of Content

HTML Structure
CSS
JavaScript Implementation
Result

HTML Structure

I'll be using the following HTML structure:

<body>
  <div id ="container" class="content-wrapper text-center">
    <div class="content-wrapper text-center">
      <div class="container-fluid">
        <div class="container">
          <div class="row justify-content-center">
            <div class="col-md-8">
              <div class="card bg-light">

                <div class="card-body">
                  <h2 class="card-header">Loader</h2>
                </div>
                <div class="container-fluid">
                  <div class="row justify-content-lg-start">

                    <!-- Click Button-->

                    <div class="col-6 col-sm-5 col-md-4 col-lg-3 m-auto">
                      <form id ="form" class="form-group">
                        <input type="button" value="Display Loader" id = "add-todo" class="btn mt-10">
                      </form>
                    </div>
                  </div>
                </div>

                <!-- Show Loader -->
                <div id="loading">
                </div>

              </div>
            </div>
          </div>
        </div>
      </div>

    </div>
  </div>

</body>
<script src="js/main.js" ></script>

Note: I am using halfmoon CSS framework

Here is how the HTML file looks:

1. Loader HTML Structure

I created a js and include it beneath the body element, also create a new css, and link it to your HTML head tag.

CSS

Inside the css, I have:

.icon {
    display: inline-block;
    width: 50px;
    height: 50px;
    animation: rotation 1s infinite linear;
}

@keyframes rotation {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(359deg);
    }
}

If you've downloaded the svg icon, place it in a icon folder, and name the svg, loader.svg.

JavaScript Implementation

Inside the Js, I have:

// Get Elements
const image = document.createElement('img');
const divLoader = document.getElementById('loading');

// Listen for click button
document.getElementById('form').addEventListener('click', function(e){ // Event Delegation

    image.setAttribute('src', 'icon/loading.svg') // Set src attribute
    image.className = "icon";
    // Append the image to div loader
    divLoader.appendChild(image);

    const geticon = document.querySelector('.icon');
    setTimeout(removeLoader, 3000); // Call the timeout function

    // Remove Loader
    function removeLoader(){
        // Show loader
        geticon.remove();
    }

    e.preventDefault();
});

Let me explain how the code works:

The following gets/create the necessary elements we wanna work on:

const image = document.createElement('img');
const divLoader = document.getElementById('loading');

We then create an event lister that has a event type of click, so, once the user clicks the button, we start by creating the image element, set an attribute that contains the source of the icon (where the icon is located), we set the image class to icon, and lastly, we append the image to the div container that is going to contain the image element:

image.setAttribute('src', 'icon/loading.svg') // Set src attribute
image.className = "icon";
// Append the image to div loader
divLoader.appendChild(image);

This is used to select the element that has the icon class we just created above, this would be useful when we want to remove the element later:

const geticon = document.querySelector('.icon');

We then call the function, and gave it a duration of 3 seconds:

setTimeout(removeLoader, 3000); // Call the timeout function

and lastly, we defined the function that is going to remove the element we store in the geticon variable:

// Remove Loader
    function removeLoader(){
        // Show loader
        geticon.remove();
}

and that is it ;)

Result

Here is an illustration of how it works:

Loader_Complete

It times out every 3 seconds, you can change it here: setTimeout(removeLoader, 3000); // Call the timeout function