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 progress bar using the HTML and CSS
Overview
The progress bar is the main component for any web application. The progress tells the completion of a certain project or task. In this module we will build the progress bar using the HTML and will style it through the CSS. We will also provide the progress animation to our progress bar. In this task we will use the @keyframes to make the progress bar animated. Using the animation styling property such as animation duration, name, timing, etc.
Algorithm
Step 1 − Create a HTML boilerplate in your text editor.
Step 2 − Create the parent div container and define the class name as barContainer.
Step 3 − Now create another child of the current parent div and define the class name.
Step 4 − Create a child inherited inside the progress which will be animated.
Step 5 − Link the style sheet to the web page using the link tag within the head tag of the page.
Step 6 − Create a new file as style.css and style the page, create the animation in the progressBar using animation property.
Step 7 − Progress bar is created successfully.
Example
In this example we will create a simple progress bar using HTML and CSS. In this the index.html is the main page which is the skeleton of the page in this we had just created the frame of the component all the animation and styling part is done in the style.css part. The style.css files consist of the styling and the animation part of the component.
<html>
<head>
<link rel="stylesheet" href="style.css">
<title>Progress Bar</title>
<style>
* {
margin: 0;
}
.barContainer {
min-height: 100vh;
width: 100vw;
display: flex;
align-items: center;
}
.progress,.progressBar {
width: 20rem;
height: 2rem;
border-radius: 1.2rem;
margin: auto;
background-color: rgb(243, 243, 243);
}
.progressBar{
background-color: green;
animation: backp 3s;
margin: 0;
padding: 0;
width: 80%;
height: 2rem;
border-radius: 1rem;
box-shadow: none;
}
span{
color: white;
text-align: end;
display: block;
padding: 0.5rem;
}
@keyframes backp {
0% {
width: 0%;
}
100%{
width: 80%;
}
}
</style>
</head>
<body>
<div class="barContainer">
<div class="progress">
<div class="progressBar">
<span> 80% Completed</span>
</div>
</div>
</div>
</body>
</html>
The below given image shows the output which shows a progress bar which loads when the page is loaded as we had used only css so the progress bar is fixed with the 80% progress. So this progress bar is created to demonstrate those applications which contain tasks like course completion. So to track the completion of the task this is the perfect way to represent it in the form of a graphical user interface.
Conclusion
The progress bar is used in many applications such as when installing the updates, downloading any application, loading of applications and many more. The progress bar makes the user interface attractive. To run the progress bar in real time we cannot do it using only HTML and CSS, so to attain the progress bar in the real time project we had also use the Javascript the scripting language which can check the internet connectivity and uploading and downloading of the network by which we can make the progress of the progress bar. Using the HTML and CSS can only be used to create a static progress bar. So it is generally prefer if to use the scripting language like javascript to create progress bars.
2K+ Views
