When a developer develops a website or a web application, they often need to include a loading animation that can improve their user experience, particularly when their content is loading.
It also helps to gain users' attention by keeping them engaged while loading content, and it lets users know what is going on instead of leaving them guessing. This article will look at how to load animation in Vanilla JavaScript by creating loaders of different styles.
What is an animation?
Animation is a way of displaying still figures to appear as moving images. Users can create their animations using animation codes which are easy to use in JavaScript. They can do these JavaScript animations by bringing changes gradually to programming in an HTML element's style. These changes are nothing but the timers.
When users set the timer to a small interval, it makes the animation continuous. There are several use cases of animations in programming. Users can create animations for loaders using JavaScript, and this is what we will discuss in the following sections.
How can users create a loader?
Using several techniques, users can create and display a loader. In this section, we will learn to create a loader that covers the whole screen. The following code snippet will make users understand how to create such loaders.
Code Snippet:
<html>
<head>
<title>Loading-animation using JavaScript</title>
<style>
.loader {
border: 16px solid #98345439;
border-radius: 50%;
border-top: 16px solid #453553;
width: 150px;
height: 150px;
-JS-animation: spin 1s linear infinite;
animation: spin 1s linear infinite;
}
@-JS-keyframes spin {
0% { -JS-transform: rotate(0deg); }
100% { -JS-transform: rotate(360deg); }
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
</style>
</head>
<body>
<h2> How To Create A Loader </h2>
<div class = "loader" > </div>
</body>
</html>
Output:
Explanation:
Here, using HTML and JavaScript, we have created a loader. The border property defines the size of the loader's border and the border color of the loader.
The border-radius property changes the loader into a circle. We have specified the inner blue spinning item inside the loader's border with the border-top property.
Users can also include border-left, border-bottom, and border-right if they like to add more "spinners." We have used the width and height properties to define the size of the loader.
And lastly, we have added the final animation that creates the blue spinning item that spins permanently with a one-second animation speed.
How to implement loading animation from an API call by requesting external content?
It is the process where users need another external API (Application Programming Interface) to create a loader. APIs allow users to communicate with different services and products.
Code Snippet:
<html>
<head>
<title>Loading-animation using JavaScript</title>
<style>
.spinner {
border: 16px solid #98345439;
border-radius: 50%;
border-top: 16px solid #453553;
width: 50px;
height: 50px;
-JS-animation: spin 1s linear infinite;
animation: spin 1s linear infinite;
}
@-JS-keyframes spin {
0% { -JS-transform: rotate(0deg); }
100% { -JS-transform: rotate(360deg); }
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.loader-container{
display: none;
}
</style>
</head>
<body>
<div class = "main-content">
<h1> Loading animation </h1>
<p>Here, in this example, we will show how to generate or implement loading animation when requesting external content from an API call:</p>
<div class = "buttons" >
<button class = "button getting_the_quote">Quote Generator</button>
</div>
<div class="quote-section">
<div class = "loader-container" id="loader-container">
<div class = "spinner" ></div>
</div>
<blockquote class="a_quote">We will see some famous quotes in the below section:</blockquote>
</div>
</div>
<script>
function displayLoading(){
var loder = document.querySelector('#loader-container');
loder.style.display = 'block';
}
function hide_the_Loading(){
var loder = document.querySelector('#loader-container');
loder.style.display = 'none';
}
const getQuoteBtn = document.querySelector('.getting_the_quote');
getQuoteBtn.addEventListener('click', () => {
displayLoading();
fetch('https://api.quotable.io/random')
.then((r) => {
return r.json();
})
.then((data) => {
hide_the_Loading();
const a_quote = document.querySelector('.a_quote');
a_quote.innerHTML = data.content;
});
});
</script>
</body>
</html>
Output:
Explanation:
Here, we have added external content from an API that involves famous quotes from different authors. We created a button to generate the quotes and then used the document.querySelector() method that fetches the HTML element by constructing a callback function.
It will create a click event, and when end-users click the generate button, it will trigger the click event. It will successfully help users generate random quotes in the application using APIs.
Steps:
- By default hide loading animation div
- Trigger click event
- Show loading animation div
- Execute API to get data
- When we get the data hide loading animation div
- Display data from API
How can users create a loader using a GIF?
First, let us know what a GIF is. A GIF is a bitmap image format animated icon that plays indefinitely.
Once users have created their GIF, they can change or modify the loader styles using the loader-container div. There are multiple techniques to style a loader. They can obtain a creative loader by simply adding properties to loader content.
Also, users can use external urls of s GIF loader that will add the loader using the .loader-container {}.
Code Snippet:
<html>
<head>
<title>Loading-animation using JavaScript</title>
<style>
.loader-container {
width: 120%;
height: 120vh;
position: fixed;
background: #98765433
url("https://media2.giphy.com/media/6036p0cTnjUrNFpAlr/200w.webp?cid=ecf05e47ug63r6q1bodmlutsnu96ve2852nbqyc90lbveqjt&rid=200w.webp&ct=g") center
no-repeat;
z-index: 5;
display: none;
}
</style>
</head>
<body>
<div class = "main-content">
<h1> Loading animation </h1>
<p>Here, in this example, we will show how to generate or implement loading animation when requesting external content from an API call:</p>
<div class = "buttons" >
<button class = "button getting_the_quote">Quote Generator</button>
</div>
<div class="quote-section">
<div class = "loader-container" id="loader-container">
<div class = "spinner" ></div>
</div>
<blockquote class="a_quote">We will see some famous quotes in the below section:</blockquote>
</div>
</div>
<script>
function displayLoading(){
var loder = document.querySelector('#loader-container');
loder.style.display = 'block';
}
function hide_the_Loading(){
var loder = document.querySelector('#loader-container');
loder.style.display = 'none';
}
const getQuoteBtn = document.querySelector('.getting_the_quote');
getQuoteBtn.addEventListener('click', () => {
displayLoading();
fetch('https://api.quotable.io/random')
.then((r) => {
return r.json();
})
.then((data) => {
hide_the_Loading();
const a_quote = document.querySelector('.a_quote');
a_quote.innerHTML = data.content;
});
});
</script>
</body>
</html>
Output:
Explanation:
We used the HTML and JavaScript code to implement a loading animation in Vanilla JavaScript. Inside the .loader-container, we have set the width, height, position, and background of the JS loader. Also, we have used an external url for loading an external GIF loader in the HTML file.
Conclusion:
We hope this article has catered to the techniques of creating loaders in the loader container using Vanilla JavaScript. There are a couple of easy and efficient techniques to implement different styles in the loader, but we opt to create a loader that spins in a circular rotation. Users can also create their GIFs or CSS animated loader.