<div class="progress"></div>
body {
padding: 40px;
background-image: url(https://picsum.photos/1000/1000);
background-size: cover;
}
.progress {
border: 1px solid #2193b0;
height: 30px;
border-radius: 10px;
position: relative;
overflow: hidden;
}
.progress:before {
content: '';
display: block;
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 40%;
background: linear-gradient(to right, #2193b0, #6dd5ed);
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.