CSS Progress Bar

CSS Progress Bar

In web design, a progress bar is a common element used to display information such as the degree of completion of a task or the progress of page loading. In this article, we’ll learn how to create various progress bar styles using CSS.

1. Basic Progress Bar

First, let’s start with the most basic progress bar. A simple horizontal progress bar is typically a rectangular element with a background and foreground color.

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

</div>

.progress-bar {
width: 100%;
background-color: #f1f1f1;
}

.progress {
width: 50%;
height: 20px;
background-color: #4CAF50;
}

In the example above, .progress-bar represents the container of the entire progress bar, and .progress represents the actual progress of the progress bar. We set the width, height, and background color of the progress bar and progress bar.

2. Different Progress Bar Styles

2.1 Rounded Corner Progress Bar

Sometimes, we want the corners of a progress bar to be rounded to make the entire progress bar look more beautiful.

.progress {
border-radius: 10px;
} 

2.2 Gradient Progress Bar

In addition to single background and foreground colors, we can also use CSS gradients to add more variety to progress bars.

.progress {
background: linear-gradient(to right, #FFD700, #FF4500);
}

2.3 Animated Progress Bar

To make the progress bar look more dynamic, we can add animation effects.

.progress {
width: 0;
animation: progress-animation 3s ease infinite;
}

@keyframes progress-animation {
0% { width: 0; }
100% { width: 100%; }
}

In the example above, we define an animation called progress-animation to gradually increase the width of the progress bar from 0 to 100. This creates a dynamic progress bar effect.

3. Responsive Progress Bar

Sometimes, we need a progress bar that automatically adjusts to the page size. This is where responsive design comes in.

.progress-bar { 
width: 100%; 
background-color: #f1f1f1; 
height: 20px; 
}

.progress {
width: 50%;
height: 100%;
background-color: #4CAF50;
}

In this example, we set the progress bar and progress bar heights to fixed values, but set the widths to percentages. This allows the progress bar to automatically adjust to the page size.

Summary

Through this article, we learned how to use CSS to create various styles of progress bars, including basic progress bars, rounded progress bars, gradient progress bars, animated progress bars, and responsive progress bars.