Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to Create the Animated Loader Ring using HTML and CSS?
Overview
A loader is a web component which is used by almost all of the web applications. To build a loader ring we should have some prior knowledge about Cascading Styles Sheet (CSS) as the CSS involves the styling and animating part of the loader ring. As the loader component is loaded before the original content loads to the web page. The main styling properties that will be used to build this feature are animation, transition and keyframes. These three CSS properties will make a simple static animation loading ring to the animated loader ring.
Algorithm
Step 1 − Create a HTML file in a folder and open it with a text editor. Add the HTML boilerplate to the HTML file.
Step 2 − Create a HTML parent div container in the body tag of HTML document with the class name as “loading”.
<div class="loading"></div>
Step 3 − Create a child div container which is the main loader ring with the class name as “Loader”.
<div class="loader"></div>
Step 4 − Create a p tag with the text “Loading” in it.
<p>Loading ....</p>
Step 5 − Now create a style.css file and link that file to the HTML document.
<link rel="stylesheet" href="style.css">
Step 6 − Now style the HTML element and make the loader ring in of the web page.
body {
margin: 0;
width: 100%;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
p {
font-family: 'Segoe UI';
}
Step 7 − Target the loader class and make the border with border radius, so to make a ring frame like structure.
.loader {
border: 10px solid #d6d6d6;
border-radius: 50%;
border-top: 10px solid #5bdb34;
width: 50px;
height: 50px;
}
Step 8 − Add the animation property to the loader element with the animation name as “lring” with the animation duration and iteration.
.loader {
border: 10px solid #d6d6d6;
border-radius: 50%;
border-top: 10px solid #5bdb34;
width: 50px;
height: 50px;
animation: lring 1s linear infinite;
}
Step 9 − Now create the keyframe property and target the above animation and set the animation to the elements.
@keyframes lring {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
Step 10 − The animated loader ring is created successfully.
Example
In this example we have created an animated loader ring feature component using the simple HTML and CSS animation property. To achieve this we have created two files, the first file as index.html which is the layout or frame of the loader ring and the other file used is the style.css file which is the styling and working of the loader ring.
<html>
<head>
<title>loading ring</title>
<link rel="stylesheet" href="style.css">
<style>
body {
margin: 0;
width: 100%;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
p {
font-family: 'Segoe UI';
}
.loader {
border: 10px solid #d6d6d6;
border-radius: 50%;
border-top: 10px solid #5bdb34;
width: 50px;
height: 50px;
animation: lring 1s linear infinite;
}
@keyframes lring {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<div class="loading">
<div class="loader"></div>
<p>Loading ....</p>
</div>
</body>
</html>
Conclusion
The above feature is used in all of the web or mobile applications. As the above created is just a component we can embed this feature component to the live working application by using the API fetch data or our local data, so when the web data is not loaded to our webpage till then on the screen we can show the animated loader ring as soon as the data loads we will replace the loader ring with the website content. We can also build the animated loadings in various designs.
358 Views
