Is it actually possible to completely remove the gray area of this progress bar?
progress, progress[role] {
border: none;
background-size: auto;
height: 24px;
background-color: green;
width: 100%;
}
.skill-list {
list-style: none;
margin: 0;
padding: 1em;
}
.skill {
margin-bottom: 1em;
position: relative;
}
.skill h5 {
color: #fff;
left: 1em;
line-height: 1;
position: absolute;
top: -10px;
text-transform: uppercase;
}
.skill ::-webkit-progress-value {
-webkit-animation: bar-fill 2s;
width: 0px;
}
.skill-1::-webkit-progress-value {
background: #ff9e2c;
border-radius: 5px;
}
.skill-1::-moz-progress-bar {
background: #ff9e2c;
border-radius: 5px;
}
.skill-2::-webkit-progress-value {
background: #4ecdc4;
border-radius: 5px;
}
.skill-2::-moz-progress-bar {
background: #4ecdc4;
}
.skill-3::-webkit-progress-value {
background: #ff6b6b;
border-radius: 5px;
}
.skill-3::-moz-progress-bar {
background: #ff6b6b;
border-radius: 5px;
}
@-webkit-keyframes bar-fill {
0% {
width: 50px;
}
}
@keyframes bar-fill {
0% {
width: 50px;
}
}
Can we actually make it happen?