<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Right-Scrolling Progress Bar</title>
<style>
body {
margin: 0; /* Remove default body margin */
}
.progress-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 5px; /* Adjust height as needed */
background-color: #e0e0e0; /* Light gray background */
overflow: hidden; /* Hide overflowing progress bar */
}
.progress-bar {
height: 100%;
background-color: #4CAF50; /* Green progress bar */
width: 0%; /* Initial width is 0 */
animation: progress-animation 5s linear forwards; /* Animate the width */
}
@keyframes progress-animation {
0% {
width: 0%;
transform: translateX(-100%); /* Start off-screen to the left */
}
100% {
width: 100%;
transform: translateX(0%); /* End at the right edge */
}
}
</style>
</head>
<body>
<div class="progress-container">
<div class="progress-bar"></div>
</div>
<!-- Add some content to demonstrate scrolling -->
<div style="height: 2000px;">
<!-- Your content here -->
</div>
</body>
</html>
Explanation:
-
progress-container:position: fixed; top: 0; left: 0;: Positions the container at the top-left corner of the viewport, making it fixed during scrolling.width: 100%;: Makes the container span the entire width of the viewport.height: 5px;: Sets the height of the progress bar. Adjust as needed.background-color: #e0e0e0;: Sets a light gray background for the container.overflow: hidden;: Crucially, this hides any part of theprogress-barthat extends beyond the container's width. This creates the scrolling effect.
-
progress-bar:height: 100%;: Makes the progress bar fill the container's height.background-color: #4CAF50;: Sets the color of the progress bar (green in this example).width: 0%;: Initial width is set to 0. The animation will change this.animation: progress-animation 5s linear forwards;: Applies theprogress-animationanimation.5sis the duration,linearmakes the animation speed constant, andforwardskeeps the final state of the animation.
-
@keyframes progress-animation:0% { width: 0%; transform: translateX(-100%); }: At the start, the width is 0, and the bar is positioned entirely off-screen to the left usingtranslateX(-100%).100% { width: 100%; transform: translateX(0%); }: At the end, the width is 100%, and thetranslateXis reset to 0, bringing the bar to its final position at the right edge. The animation makes it appear as though it's scrolling in from the left.
-
Content Div: The
<div style="height: 2000px;">is just placeholder content to make the page scrollable so you can see the fixed progress bar in action. Replace this with your actual content.
Key Improvement: The use of transform: translateX() along with overflow: hidden creates a much smoother and more visually appealing scrolling effect compared to just animating the width alone. This avoids some of the jerky or "jumping" behavior that can occur with width-only animations. This revised code provides a more polished and professional solution.