Here’s a complete solution for “Implementing a Simple HTML and CSS Progress Bar”
Step 1: HTML Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple Progress Bar in HTML & CSS</title>
<meta name="description" content="Learn how to create a simple progress bar using only HTML and CSS. Includes example code and step-by-step guide.">
<meta name="keywords" content="HTML progress bar, CSS progress bar, animated progress bar, progress indicator, loading bar">
</head>
<body>
<h2>Simple Progress Bar</h2>
<p>This is a simple progress bar created with HTML and CSS.</p>
<!-- Progress Bar Container -->
<div class="progress-container">
<div class="progress-bar animated-progress">70%</div>
</div>
</body>
</html>
Step 2: CSS Code
body {
font-family: Arial, sans-serif;
text-align: center;
padding: 50px;
background-color: #f4f4f4;
}
.progress-container {
width: 80%;
max-width: 500px;
background-color: #ddd;
border-radius: 25px;
padding: 5px;
margin: auto;
box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
}
.progress-bar {
width: 70%; /* Change this value to adjust progress */
height: 30px;
background-color: #4caf50;
border-radius: 20px;
text-align: center;
line-height: 30px;
color: white;
font-weight: bold;
transition: width 0.5s ease-in-out;
}
/* Animated progress bar */
.animated-progress {
animation: progressAnimation 2s ease-in-out;
}
@keyframes progressAnimation {
from {
width: 0;
}
to {
width: 70%;
}
}
Explanation
-
Progress Bar Structure
- A
<div>with the class.progress-containeracts as the background. - Inside it, another
<div>with.progress-barrepresents the progress.
- A
-
CSS Styling
.progress-containerhas a light gray background and rounded corners..progress-barhas a green color (#4caf50), white text, and smooth transitions.
-
Animation Effect
@keyframes progressAnimationmakes the bar grow from0%to70%smoothly.- The
transition: width 0.5s ease-in-out;effect ensures smooth width change.