How to add padding on the right side-CodePudding

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 >
  <div ></div>
</div>

CodePudding user response：

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 >
  <div ></div>
</div>

CodePudding user response：

You could just simply change the treanslate x value:

@keyframes indeterminateAnimation {
  0% { transform:  translateX(0) scaleX(0); }
  40% { transform:  translateX(0) scaleX(0.4); }
  100% { transform:  translateX(45%) scaleX(0.5); }
}