Author: 1WD Crew

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 <div> with the class progress-container that houses the overall progress bar, a progress <div> that styles the progress bar’s container and a child <div> with the class <progress-bar> which represents the advancing progress.

<div class="progress-container">
  <div class="progress progress-moving">
    <div class="progress-bar"></div>
  </div>
</div>

In the CSS, we’ll specify the appearance and behavior of these div elements. We’ll also detail the animation, governed by the 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 */
}

In our setup, the progress bar is housed in a .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.

• The .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.
• The .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.
• The @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

In addition, here are some areas to consider for augmenting the progress bar:

• Dimensions: Adjusting the progress bar’s dimensions to harmonize with your page’s other elements can help enhance your user interface’s overall aesthetics. Ensuring the progress bar is not disproportionately large or small is crucial for maintaining a balanced display.
• Design Coherence: Aligning the progress bar’s visual elements, such as color and animation, with your website’s overall design can enhance the consistency of your user interface.
• Device Compatibility: Guaranteeing your progress bar’s functional and visual consistency across various devices and screen sizes is vital. This will cater to users regardless of their device preferences.

Final Thoughts

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!