Vertical skeleton loader not working from bottom to top animation - css

Question

I'm using both vertical and horizontal skeleton loader in a react component, please refer to this codepen - https://codepen.io/phutschi/pen/jejzbK for reference, I want to like this for vertical loader from bottom to top.
Loader.js
import './loader.scss'
function Loader() {
return (
<div className="animated-background">
<div className="background-masker content-first-line"></div>
<div className="background-masker content-second-line"></div>
<div className="background-masker content-third-line"></div>
<div className="background-masker vertical-line"></div>
</div>
)
}
export default Loader
loader.scss
#keyframes placeHolderLoader {
0% {
background-position: -468px 0;
}
100% {
background-position: 468px 0;
}
}
#keyframes verticalPlaceHolderLoader {
0% {
background-position: bottom ;
}
100% {
background-position: top;
}
}
.animated-background {
// height: 120px;
// position: relative;
.background-masker{
height: 14px;
border-radius: 7px;
width: 80%;
margin-bottom: 2px;
animation-duration: 1.3s;
animation-fill-mode: forwards;
animation-iteration-count: infinite;
animation-name: placeHolderLoader;
animation-timing-function: linear;
background: #f6f7f8;
background: linear-gradient(to right, #eeeeee 8%, #dddddd 18%, #eeeeee 33%);
background-size: 100%;
&.vertical-line{
width: 50px;
height: 140px;
animation-duration: 1.3s;
background: linear-gradient(to bottom, #eeeeee 8%, #dddddd 18%, #eeeeee 33%);
animation-name: verticalPlaceHolderLoader;
}
}
}
u can see, that I'm using separate gradient and animation for vertical lines, but the animation is not working for vertical lines, the animation should work from bottom to top.

Answer 1

Change the vertical animation keyframe to the following and it should work:
#keyframes verticalPlaceHolderLoader {
0% {
background-position: 0 70px;
}
100% {
background-position: 0 -70px;
}
}
See demo