<!DOCTYPE html>
<html>
<head>
<style>
.progress {
background: #ddd;
border-radius: 20px;
overflow: hidden;
width: 300px;
height: 25px;
}
.progress-bar {
width: 70%; /* progress value */
height: 100%;
background: linear-gradient(to right, green, lime);
text-align: center;
color: white;
line-height: 25px;
}
</style>
</head>
<body>
<div class="progress">
<div class="progress-bar">70%</div>
</div>
</body>
</html>
Explanation:
- A container with a colored bar inside.
- Can be styled with gradients.
Leave a Reply