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
- 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:
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:
It times out every 3 seconds, you can change it here: setTimeout(removeLoader, 3000); // Call the timeout function