Loading effect in HTML CSS for text - html

Question

I have seen some site using an effect for line of text loading. I have searched a lot but unable to find what is called.
Effect:
Does any plugin or css file for this effect like bootstrap.
I know this question is kind of silly but i have no idea where to ask this question i have search about where to ask question Html/CSS.

Answer 1

This is close to something you want. It's done only with CSS/HTML and you can easily customize it for your taste
https://jsfiddle.net/hau122w8/
<div class="timeline-item">
<div class="animated-background">
<div class="background-masker content-first"></div>
<div class="background-masker content-top"></div>
<div class="background-masker content-first-end"></div>
<div class="background-masker content-second-line"></div>
<div class="background-masker content-second-end"></div>
<div class="background-masker content-third-line"></div>
<div class="background-masker content-third-end"></div>
</div>
</div>
.timeline-item {
background-color: #fff;
border: 1px solid;
border-color: #ddd;
border-radius: 3px;
padding: 12px;
margin: 0 auto;
}
#keyframes placeHolderShimmer {
0% {
background-position: 0 0;
}
100% {
background-position: 10000px 0;
}
}
.animated-background {
animation-duration: 10s;
animation-fill-mode: forwards;
animation-iteration-count: infinite;
animation-timing-function: linear;
animation-name: placeHolderShimmer;
background: #f6f7f8;
background: linear-gradient(to right, #eeeeee 8%, #aacfde 18%, #eeeeee 33%);
height: 96px;
position: relative;
}
.background-masker {
background: #fff;
position: absolute;
}
/* Every thing below this is just positioning */
.background-masker.content-top,
.background-masker.content-second-line,
.background-masker.content-third-line,
.background-masker.content-second-end,
.background-masker.content-third-end,
.background-masker.content-first-end {
top: 40px;
left: 0;
right: 0;
height: 6px;
}
.background-masker.content-first {
height: 10px;
top: 15px;
left: 0;
right: 0;
}
.background-masker.content-top {
height: 20px;
}
.background-masker.content-first-end,
.background-masker.content-second-end,
.background-masker.content-third-end {
width: auto;
left: 380px;
right: 0;
top: 60px;
height: 8px;
}
.background-masker.content-second-line {
top: 68px;
}
.background-masker.content-second-end {
left: 420px;
top: 74px;
}
.background-masker.content-third-line {
top: 82px;
}
.background-masker.content-third-end {
left: 300px;
top: 88px;
}