Introduction
Loading bars are also known as Progress bars. It tells the user how much time is remaining as a percentage, volume or fraction. It is a visual indicator that shows progress of a task.
Purpose of Progress bar in computer operations
A loading bar is a graphical control element used to visualize the progress of an extended computer operation, so here we use the progress bar as an animation loader.
Structure of animation loading bar
By creating a basic structure using HTML, we will have a division and give class so that it can be targeted using CSS.
In CSS section we will give visualization to the loading bar such as background color and animation effect etc.
We will also give a border box design and assign a color to the bar.
Code to create animation loading bar
<!DOCTYPE html>
<html lang="en">
<head>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-color: white;
}
.progress-bar-container h2 {
font-family: Arial, Helvetica, sans-serif;
color: #black;
letter-spacing: 1px;
font-size: 20px;
}
.progress-bar {
width: 800px;
height: 5px;
margin-top: 10px;
border: 1px solid #565656;
border-radius: 5px;
box-shadow: 0 0 10px rgb(245, 159, 0);
}
.percentage {
display: block;
height: 100%;
background-color: blue;
border-radius: 5px;
animation: progress 1500ms ease-in 1;
}
.one {
width: 85%;
}
.two {
width:70%;
}
.three {
width: 55%;
}
}
@keyframes progress {
from {
width: 0;
}
}
</style>
</head>
<body>
<div class="skills">
<div class="progress-bar-container">
<h2>one</h2>
<div class="progress-bar">
<span class="percentage-one"></span>
</div>
</div>
<div class="percentage-bar-container">
<h2>two<h2>
<div class="progress-bar">
<span class="percentage two"></span>
</div>
</div>
<div class="progress-bar-container">
<h2>three<h2>
<div class="progress-bar">
<span class="percentage three"></span>
</div>
</div>
</div>
</body>
</html>
Output will be displayed as below
