Created an indeterminate progress-bar. I have added padding but that does not seem to apply on the right side.
.progress-bar {
height: 5px;
background-color: red;
width: 10rem;
overflow: hidden;
padding: 1rem;
}
.progress-bar-value {
width: 100%;
height: 100%;
background-color: pink;
animation: indeterminateAnimation 1s infinite linear;
transform-origin: 0% 100%;
}
@keyframes indeterminateAnimation {
0% { transform: translateX(0) scaleX(0); }
40% { transform: translateX(0) scaleX(0.4); }
100% { transform: translateX(100%) scaleX(0.5); }
}<div class="progress-bar">
<div class="progress-bar-value"></div>
</div>>Solution :
No, a padding-right won’t work here – because you are translating the position of the inner element.
But you can replace the padding-right with a border-right instead.
.progress-bar {
height: 5px;
background-color: red;
width: 10rem;
overflow: hidden;
padding: 1rem 0 1rem 1rem;
border-right: 1rem solid red;
}
.progress-bar-value {
width: 100%;
height: 100%;
background-color: pink;
animation: indeterminateAnimation 1s infinite linear;
transform-origin: 0% 100%;
}
@keyframes indeterminateAnimation {
0% { transform: translateX(0) scaleX(0); }
40% { transform: translateX(0) scaleX(0.4); }
100% { transform: translateX(100%) scaleX(0.5); }
}<div class="progress-bar">
<div class="progress-bar-value"></div>
</div>