offer jobs schedule amazon media file explorer download upload index folder image licenses menu widget Play Pause profile-settings more dots-two-horizontal dots-two-vertical more-vertical pending google-plus hangouts facebook instagram whatsapp spotify telegram twitter vine renren rss youtube twitch vimeo flickr dribble behance deviantart 500px steam github soundcloud skype reddit linkedin lastfm delicious stackoverflow pinterest xing flattr foursquare yelp World

Creating a Loader and Remove it After a Specific Time Using JavaScript/CSS/SVG

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.

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

Related Post(s)

  • Getting Started With JavaScript (Introduction)

    This is my first JavaScript guide on this blog, and in this guide, we would go over the introduction of JavaScript, but first… What is JavaScript? JavaScript is a client-side scripting language su

  • Operator in Javascript

    Operators in javascript can either be used for logical expression where you connect two or more expressions and can be a comparison expression where you compare two values. You can also use an operat

  • Exploring Data Types, and Variables in JavaScript

    In JavaScript or any programming language, a data type is an attribute of data that tells the interpreter how the programs intend to use the given data. JavaScript support a couple of data type whic

  • Object Oriented Programming in JavaScript (The ES5 Way)

    In this guide, you'll learn and understand how to create and use Objects in JavaScript (ES5). While ES6 already supports creating classes (which is the way you create objects in Java, PHP, etc), they

  • Working With The Local & Session Storage In JavaScript

    We previously take a deep dive into the Windows Object, Properties, Methods, and even the Document Object itself, in this guide, we would explore working with the local and session storage in JavaScr

  • Guide To Functions In JavaScript

    Functions in JavaScript or any programming languages are modular building blocks for creating powerful and modular scripts, using function makes it easy to isolate a code since it would be packaged u