My goal is to create a skill bar that smoothly slides in the background color of the progress while keeping the label for the skill in a fixed position.
.skill-container * {
box-sizing: border-box;
}
.skill-container {
width: 100%;
border-radius: 5px;
background-color: lightgray;
margin: 20px 0;
overflow: hidden;
}
.skill-container .skill {
display: inline-block;
text-align: left;
color: white;
padding: 10px 0 10px 4px;
border-radius: inherit;
background-color: #312E81;
white-space: nowrap;
position: relative;
animation: animateLeft 1s ease-out;
}
@keyframes animateLeft {
from {
left: -100%
}
to {
left: 0
}
}
.skill-container .skill.skill-level-70 {
width: 70%
}<div class="skill-container">
<span class="skill skill-level-70">CSS</span>
</div>I have successfully implemented the animation, but I am working on finding a way to ensure that the text (CSS) stays on the left while the background color dynamically shows the progress.