Today, we’re exploring Progress bars and their role in user interaction on websites. Progress bars provide users with visual cues for ongoing activities, such as page loading, file uploads, or form completions. In this tutorial, we’ll guide you through creating an animated, color-shifting Progress Bar using only CSS. This example not only demonstrates some capabilities of CSS but also serves as a foundation for further exploration and expansion. Let’s get started!
The HTML and CSS Setup
We start with a straightforward HTML structure: a parent In the CSS, we’ll specify the appearance and behavior of these div elements. We’ll also detail the animation, governed by the In our setup, the progress bar is housed in a In addition, here are some areas to consider for augmenting the progress bar: While we discussed the standalone design in this guide, such progress bars are typically paired with JavaScript to reflect real-time changes in data, enhancing user interaction further. The techniques shown here can also serve as a base for creating other interactive components on your site. We’ve only scratched the surface of what’s possible with CSS animations. We encourage you to explore, experiment, and create with your newfound knowledge!progress-container
that houses the overall progress bar, a progress
which represents the advancing progress.
progress-moving
class, that visually communicates the progress.
/* The .progress-container is a wrapper around the progress bar that sets its overall width. */
.progress-container {
width: 400px;
}
/* The .progress class sets the background, shadow, and border properties of the bar's container. */
.progress {
padding: 6px; /* Adds space around the progress bar */
border-radius: 30px; /* Rounds the corners of the bar's container */
background: rgba(0, 0, 0, 0.25); /* Sets a semi-transparent black background */
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25), 0 1px rgba(255, 255, 255, 0.08); /* Adds inner shadow for 3D effect and slight outer highlight */
}
/* The .progress-bar class defines the appearance and the animation behavior of the actual progress bar. */
.progress-bar {
height: 18px; /* Sets the height of the progress bar */
border-radius: 30px; /* Ensures the progress bar has rounded corners */
background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05)); /* Adds a subtle gradient to the progress bar */
transition: 0.4s linear; /* Smoothens the transition when properties change */
transition-property: width, background-color; /* Specifies which properties the transition effect applies to */
}
/* The .progress-moving .progress-bar selector applies when the progress bar is moving. */
.progress-moving .progress-bar {
width: 85%; /* Sets the final width the progress bar should reach */
background-color: #EF476F; /* Sets the final color the bar should transition to */
animation: progressAnimation 6s; /* Specifies the animation that will play */
}
/* Defines the start and end states of the progress bar during the animation. */
@keyframes progressAnimation {
0% { width: 5%; background-color: #F9BCCA; } /* The progress bar starts at 5% width and a light pink color */
100% { width: 85%; background-color: #EF476F; } /* It ends at 85% width and a darker pink color */
}
.progress-container
, which controls the overall width of the progress bar. The .progress
class gives styling to the progress bar’s container, adding padding, a rounded border, a semi-transparent black background, and a subtle shadow effect for depth..progress-bar
class defines the visual characteristics and animation behavior of the progress bar itself. Its height, rounded corners, and background gradient are set, and it uses the transition
property to ensure that changes in width and background color occur smoothly over time..progress-moving .progress-bar
selector is used to specify the animation when the progress bar is in motion. This is where the final width and color of the progress bar are set, along with the details of the animation that will play.@keyframes progressAnimation
rule specifies the start and end states of the progress bar during the animation. At the start (0%
), the progress bar has a width of 5% and a light pink color (#F9BCCA
). At the end (100%
), the progress bar expands to 85% of its container width and changes to a darker pink color (#EF476F
).Potential Improvements
Final Thoughts
This post first appeared on How To Become A Freelance Web Designer? • WordPress Web Design Tips And Tricks - 1stWebDesigner, please read the originial post: here