CSS rectangular gradient progress
CSS Rectangular Gradient Progress
In web design, it’s common to need to display progress, such as download progress or upload progress. By using CSS, we can easily create a rectangular gradient progress bar. This article will detail how to create a rectangular gradient progress bar using CSS and provide several sample code examples for your reference.
1. Simple Rectangular Gradient Progress Bar
First, let’s create a simple rectangular gradient progress bar. The code is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple Gradient Progress Bar</title>
<style>
.progress {
width: 100%;
height: 30px;
background: linear-gradient(to right, #4CAF50 50%, #f1f1f1 50%);
}
</style>
</head>
<body>
<div class="progress"></div>
</body>
</html>
Output:
In this example, we create a rectangular progress bar and use a linear gradient to achieve a color transition effect. The progress bar has a width of 100% and a height of 30px, and its color gradients from green (#4CAF50) to gray (#f1f1f1).
2. Animated Rectangular Gradient Progress Bar
Next, let’s create a rectangular gradient progress bar with an animated effect. The code is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Animated Gradient Progress Bar</title>
<style>
.progress {
width: 100%;
height: 30px;
background: linear-gradient(to right, #4CAF50 50%, #f1f1f1 50%);
animation: progress 5s linear infinite;
}
@keyframes progress {
0% {
background-position: 0 0;
}
100% {
background-position: 100% 0; }
}
</style>
</head>
<body>
<div class="progress"></div>
</body>
</html>
Output:
In this example, we use CSS animations (@keyframes) to animate the progress bar. The progress bar will move from left to right over 5 seconds, creating a looping animation effect.
3. Rectangular Gradient Progress Bar with Percentage Display
Sometimes, we need to display the current percentage on the progress bar. Below is a sample code for a rectangular gradient progress bar with a percentage display:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Gradient Progress Bar with Percentage</title>
<style>
.progress {
position: relative;
width: 100%;
height: 30px;
background: linear-gradient(to right, #4CAF50 50%, #f1f1f1 50%);
}
.progress::after {
content: attr(data-percent) '%';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
text-align: center;
line-height: 30px;
color: #000;
}
</style>
</head>
<body>
<div class="progress" data-percent="50"></div>
</body>
</html>
Output:
In this example, we use a pseudo-element (::after) to display the current percentage. By setting the data-percent attribute to control the displayed percentage, the width of the progress bar will change as the percentage changes.
4. Rectangular Gradient Progress Bar with Different Colors
Sometimes, we need to display different colors depending on the progress status. Here’s a sample code for a rectangular gradient progress bar with different colors:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Gradient Progress Bar with Different Colors</title>
<style>
.progress {
width: 100%;
height: 30px;
background: linear-gradient(to right, #4CAF50 20%, #FFC107 40%, #f1f1f1 40%);
}
</style>
</head>
<body>
<div class="progress"></div>
</body>
</html>
Output:
In this example, we use multiple color values to define different progress states. The progress bar displays different colors based on the percentage, creating a multi-color gradient effect.
5. Rectangular Gradient Progress Bar with Shadow Effect
Sometimes, we need to add a shadow effect to the progress bar to make it look more three-dimensional. Below is a sample code for a rectangular gradient progress bar with a shadow effect:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Gradient Progress Bar with Shadow</title>
<style>
.progress {
width: 100%;
height: 30px;
background: linear-gradient(to right, #4CAF50 50%, #f1f1f1 50%);
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}
</style>
</head>
<body>
<div class="progress"></div>
</body>
</html>
Output:
In this example, we use the box-shadow property to add a shadow effect to the progress bar. The shadow color is black with an opacity of 0.2, making the progress bar look more three-dimensional.
6. Rectangular Gradient Progress Bar with Rounded Corners
Sometimes, we need to add some rounded corners to the progress bar to make it look more rounded. Below is a sample code for a rectangular gradient progress bar with rounded corners:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Gradient Progress Bar with Border Radius</title>
<style>
.progress {
width: 100%;
height: 30px;
background: linear-gradient(to right, #4CAF50 50%, #f1f1f1 50%);
border-radius: 15px;
}
</style>
</head>
<body>
<div class="progress"></div>
</body>
</html>
Output:
In this example, we use the border-radius property to add rounded corners to the progress bar. The radius is 15px, making the corners of the progress bar more rounded.
7. Rectangular Gradient Progress Bar with Border
Sometimes, we need to add a border to the progress bar to make it stand out. Below is a sample code for a rectangular gradient progress bar with a border:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Gradient Progress Bar with Border</title>
<style>
.progress {
width: 100%;
height: 30px;
background: linear-gradient(to right, #4CAF50 50%, #f1f1f1 50%);
border: 1px solid #ccc;
}
</style>
</head>
<body>
<div class="progress"></div>
</body>
</html>
Output:
In this example, we use the border property to add a border effect to the progress bar. The border color is gray and the width is 1px, making the progress bar look more prominent.
8. Rectangular Gradient Progress Bar with Dynamic Effects
Sometimes, we need to add some dynamic effects to the progress bar to make it look more vivid. The following is a sample code for a rectangular gradient progress bar with dynamic effects:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Gradient Progress Bar with Animation</title>
<style>
.progress {
width: 100%;
height: 30px;
background: linear-gradient(to right, #4CAF50 50%, #f1f1f1 50%);
animation: pulse 2s infinite alternate;
}
@keyframes pulse {
0% {
transform: scale(1);
}
100% {
transform: scale(1.1);
}
}
</style>
</head>
<body>
<div class="progress"></div>
</body>
</html>
Output:
In this example, we use CSS animations (@keyframes) to add dynamic effects to the progress bar. The progress bar will scale up and down over 2 seconds, creating a reciprocating animation effect.
9. Rectangular Gradient Progress Bar with Text Tooltip
Sometimes, we need to display some text tooltip on the progress bar, such as progress percentage or progress status. Below is a sample code for a rectangular gradient progress bar with text:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Gradient Progress Bar with Text</title>
<style>
.progress {
width: 100%;
height: 30px;
background: linear-gradient(to right, #4CAF50 50%, #f1f1f1 50%);
position: relative;
}
.progress::after {
content: '50% Complete';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
text-align: center;
line-height: 30px;
color: #000;
}
</style>
</head>
<body>
<div class="progress"></div>
</body>
</html>
Output:
In this example, we use a pseudo-element (::after) to add a text prompt to the progress bar. The text reads ‘50% Complete’ and is centered above the progress bar.
10. Responsive Rectangular Gradient Progress Bar
Sometimes, we need to create a responsive progress bar that can adapt to different screen sizes. Below is a sample code for a responsive rectangular gradient progress bar:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Gradient Progress Bar</title>
<style>
.progress {
width: 100%;
height: 30px;
background: linear-gradient(to right, #4CAF50 50%, #f1f1f1 50%);
}
@media (max-width: 768px) {
.progress {
height: 20px;
}
}
</style>
</head>
<body>
<div class="progress"></div>
</body>
</html>
Output:
In this example, we use media queries (@media) to implement responsive design. When the screen width is less than 768px, the progress bar’s height will be reduced to 20px to adapt to different screen sizes.
Through the above code examples, we can see how to use CSS to create various styles of rectangular gradient progress bars. These code examples can help us more flexibly display progress information in web design and improve user experience.