<progress value="60" max="100"></progress>
body {
text-align: center;
margin-top: 50px;
}
progress {
border:none;
padding: 6px;
background: rgba(0, 0, 0, 0.25);
width: 500px;
height: 30px;
border-radius: 6px;
}
progress[value]::progress-bar {
width: 100%;
padding: 6px;
border-radius: 6px;
background-color: lightcoral;
}
progress[value]::progress-bar {
width: 100%;
background: transparent;
border-radius: 6px;
}
progress[value]::progress-value {
width: 100%;
padding: 6px;
border-radius: 6px;
background-color: lightcoral;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.