Essa e uma pergunta feita em diversos sites na internet, e antes de vim aqui perguntar pesquisei muito, até na stackoverflow em inglês.
Bom a parte do placeholder em html e css já esta pronto, consegui seguindo tutoriais em diversos sites, faltar apenas um método para implementar no Wordpress:
Modelo que deve carregar primeiro:
O resultado depois do carregamento:
Uma opção que talvez seria viável, era exibir esse o placeholder enquanto a pagina e carregada e depois remover as div/class css com JS ou criar uma função em PHP para mostrar o esse modelo primeiro e depois substituir pelo conteúdo carregado.
Alguém teria uma noção de como fazer isso, a pergunta parece esta fora do escopo, no entanto qualquer ajuda e bem vinda.
Modelo do placeholder para quem quiser utilizar:
/* INICIO DO EFEITO */
@keyframes loading--line {
0% {
background-position: -468px 0
}
100% {
background-position: 468px 0
}
}
/* FIM DO EFEITO */
.loading--line-background {
width: 615px;
height: 284px;
background: #fff;
border-radius: 3px;
position: relative;
}
.loading--masker-img {
animation-duration: 1s;
animation-fill-mode: forwards;
animation-iteration-count: infinite;
animation-name: loading--line;
animation-timing-function: linear;
background: #f6f7f8;
background: linear-gradient(to right, #eeeeee 8%, #dddddd 18%, #eeeeee 33%);
background-size: 800px 100px;
/* top: 10px; */
/* left: 10px; */
/* margin: 5px; */
width: 183px;
height: 281px;
position: absolute;
border-radius: 3px;
}
.loading--masker-title {
animation-duration: 1s;
animation-fill-mode: forwards;
animation-iteration-count: infinite;
animation-name: loading--line;
animation-timing-function: linear;
background: #f6f7f8;
background: linear-gradient(to right, #eeeeee 8%, #dddddd 18%, #eeeeee 33%);
background-size: 800px 100px;
top: 5px;
left: 195px;
width: 250px;
height: 20px;
position: absolute;
border-radius: 3px;
}
.loading--masker-views {
animation-duration: 1s;
animation-fill-mode: forwards;
animation-iteration-count: infinite;
animation-name: loading--line;
animation-timing-function: linear;
background: #f6f7f8;
background: linear-gradient(to right, #eeeeee 8%, #dddddd 18%, #eeeeee 33%);
background-size: 800px 100px;
top: 5px;
left: 505px;
width: 125px;
height: 20px;
position: absolute;
border-radius: 3px;
}
.loading--masker-tag {
animation-duration: 1s;
animation-fill-mode: forwards;
animation-iteration-count: infinite;
animation-name: loading--line;
animation-timing-function: linear;
background: #f6f7f8;
background: linear-gradient(to right, #eeeeee 8%, #dddddd 18%, #eeeeee 33%);
background-size: 800px 100px;
top: 30px;
left: 195px;
width: 50px;
height: 18px;
position: absolute;
border-radius: 3px;
}
.loading--masker-ano {
animation-duration: 1s;
animation-fill-mode: forwards;
animation-iteration-count: infinite;
animation-name: loading--line;
animation-timing-function: linear;
background: #f6f7f8;
background: linear-gradient(to right, #eeeeee 8%, #dddddd 18%, #eeeeee 33%);
background-size: 800px 100px;
top: 30px;
left: 250px;
width: 50px;
height: 18px;
position: absolute;
border-radius: 3px;
}
.loading--masker-desc--line--1 {
animation-duration: 1s;
animation-fill-mode: forwards;
animation-iteration-count: infinite;
animation-name: loading--line;
animation-timing-function: linear;
background: #f6f7f8;
background: linear-gradient(to right, #eeeeee 8%, #dddddd 18%, #eeeeee 33%);
background-size: 800px 100px;
top: 55px;
left: 195px;
width: 420px;
height: 15px;
position: absolute;
border-radius: 3px 3px 0 0;
}
.loading--masker-desc--line--2 {
animation-duration: 1s;
animation-fill-mode: forwards;
animation-iteration-count: infinite;
animation-name: loading--line;
animation-timing-function: linear;
background: #f6f7f8;
background: linear-gradient(to right, #eeeeee 8%, #dddddd 18%, #eeeeee 33%);
background-size: 800px 100px;
top: 72px;
left: 195px;
width: 420px;
height: 15px;
position: absolute;
border-radius: 0 0 3px 0;
}
.loading--masker-desc--line--3 {
animation-duration: 1s;
animation-fill-mode: forwards;
animation-iteration-count: infinite;
animation-name: loading--line;
animation-timing-function: linear;
background: #f6f7f8;
background: linear-gradient(to right, #eeeeee 8%, #dddddd 18%, #eeeeee 33%);
background-size: 800px 100px;
top: 89px;
left: 195px;
width: 275px;
height: 15px;
position: absolute;
border-radius: 0 3px 3px 3px;
}
.loading--masker-elenco {
animation-duration: 1s;
animation-fill-mode: forwards;
animation-iteration-count: infinite;
animation-name: loading--line;
animation-timing-function: linear;
background: #f6f7f8;
background: linear-gradient(to right, #eeeeee 8%, #dddddd 18%, #eeeeee 33%);
background-size: 800px 100px;
top: 115px;
left: 195px;
width: 240px;
height: 15px;
position: absolute;
border-radius: 3px;
}
.loading--masker-criador {
animation-duration: 1s;
animation-fill-mode: forwards;
animation-iteration-count: infinite;
animation-name: loading--line;
animation-timing-function: linear;
background: #f6f7f8;
background: linear-gradient(to right, #eeeeee 8%, #dddddd 18%, #eeeeee 33%);
background-size: 800px 100px;
top: 133px;
left: 195px;
width: 190px;
height: 15px;
position: absolute;
border-radius: 3px;
}
.loading--masker-genero {
animation-duration: 1s;
animation-fill-mode: forwards;
animation-iteration-count: infinite;
animation-name: loading--line;
animation-timing-function: linear;
background: #f6f7f8;
background: linear-gradient(to right, #eeeeee 8%, #dddddd 18%, #eeeeee 33%);
background-size: 800px 100px;
top: 151px;
left: 195px;
width: 275px;
height: 15px;
position: absolute;
border-radius: 3px;
}
.loading--masker-duracao {
animation-duration: 1s;
animation-fill-mode: forwards;
animation-iteration-count: infinite;
animation-name: loading--line;
animation-timing-function: linear;
background: #f6f7f8;
background: linear-gradient(to right, #eeeeee 8%, #dddddd 18%, #eeeeee 33%);
background-size: 800px 100px;
top: 169px;
left: 195px;
width: 120px;
height: 15px;
position: absolute;
border-radius: 3px;
}
.loading--masker-imdb {
animation-duration: 1s;
animation-fill-mode: forwards;
animation-iteration-count: infinite;
animation-name: loading--line;
animation-timing-function: linear;
background: #f6f7f8;
background: linear-gradient(to right, #eeeeee 8%, #dddddd 18%, #eeeeee 33%);
background-size: 800px 100px;
top: 198px;
left: 195px;
width: 40px;
height: 40px;
position: absolute;
border-radius: 3px;
}
.loading--masker-imdb-star--1 {
animation-duration: 1s;
animation-fill-mode: forwards;
animation-iteration-count: infinite;
animation-name: loading--line;
animation-timing-function: linear;
background: #f6f7f8;
background: linear-gradient(to right, #eeeeee 8%, #dddddd 18%, #eeeeee 33%);
background-size: 800px 100px;
top: 201px;
left: 239px;
width: 12px;
height: 12px;
position: absolute;
border-radius: 3px;
}
.loading--masker-imdb-star--2 {
animation-duration: 1s;
animation-fill-mode: forwards;
animation-iteration-count: infinite;
animation-name: loading--line;
animation-timing-function: linear;
background: #f6f7f8;
background: linear-gradient(to right, #eeeeee 8%, #dddddd 18%, #eeeeee 33%);
background-size: 800px 100px;
top: 201px;
left: 254px;
width: 12px;
height: 12px;
position: absolute;
border-radius: 3px;
}
.loading--masker-imdb-star--3 {
animation-duration: 1s;
animation-fill-mode: forwards;
animation-iteration-count: infinite;
animation-name: loading--line;
animation-timing-function: linear;
background: #f6f7f8;
background: linear-gradient(to right, #eeeeee 8%, #dddddd 18%, #eeeeee 33%);
background-size: 800px 100px;
top: 201px;
left: 269px;
width: 12px;
height: 12px;
position: absolute;
border-radius: 3px;
}
.loading--masker-imdb-star--4 {
animation-duration: 1s;
animation-fill-mode: forwards;
animation-iteration-count: infinite;
animation-name: loading--line;
animation-timing-function: linear;
background: #f6f7f8;
background: linear-gradient(to right, #eeeeee 8%, #dddddd 18%, #eeeeee 33%);
background-size: 800px 100px;
top: 201px;
left: 284px;
width: 12px;
height: 12px;
position: absolute;
border-radius: 3px;
}
.loading--masker-imdb-star--5 {
animation-duration: 1s;
animation-fill-mode: forwards;
animation-iteration-count: infinite;
animation-name: loading--line;
animation-timing-function: linear;
background: #f6f7f8;
background: linear-gradient(to right, #eeeeee 8%, #dddddd 18%, #eeeeee 33%);
background-size: 800px 100px;
top: 201px;
left: 299px;
width: 12px;
height: 12px;
position: absolute;
border-radius: 3px;
}
.loading--masker-imdb-star--6 {
animation-duration: 1s;
animation-fill-mode: forwards;
animation-iteration-count: infinite;
animation-name: loading--line;
animation-timing-function: linear;
background: #f6f7f8;
background: linear-gradient(to right, #eeeeee 8%, #dddddd 18%, #eeeeee 33%);
background-size: 800px 100px;
top: 201px;
left: 314px;
width: 12px;
height: 12px;
position: absolute;
border-radius: 3px;
}
.loading--masker-imdb-star--7 {
animation-duration: 1s;
animation-fill-mode: forwards;
animation-iteration-count: infinite;
animation-name: loading--line;
animation-timing-function: linear;
background: #f6f7f8;
background: linear-gradient(to right, #eeeeee 8%, #dddddd 18%, #eeeeee 33%);
background-size: 800px 100px;
top: 201px;
left: 329px;
width: 12px;
height: 12px;
position: absolute;
border-radius: 3px;
}
.loading--masker-imdb-star--8 {
animation-duration: 1s;
animation-fill-mode: forwards;
animation-iteration-count: infinite;
animation-name: loading--line;
animation-timing-function: linear;
background: #f6f7f8;
background: linear-gradient(to right, #eeeeee 8%, #dddddd 18%, #eeeeee 33%);
background-size: 800px 100px;
top: 201px;
left: 344px;
width: 12px;
height: 12px;
position: absolute;
border-radius: 3px;
}
.loading--masker-imdb-star--9 {
animation-duration: 1s;
animation-fill-mode: forwards;
animation-iteration-count: infinite;
animation-name: loading--line;
animation-timing-function: linear;
background: #f6f7f8;
background: linear-gradient(to right, #eeeeee 8%, #dddddd 18%, #eeeeee 33%);
background-size: 800px 100px;
top: 201px;
left: 359px;
width: 12px;
height: 12px;
position: absolute;
border-radius: 3px;
}
.loading--masker-imdb-star--10 {
animation-duration: 1s;
animation-fill-mode: forwards;
animation-iteration-count: infinite;
animation-name: loading--line;
animation-timing-function: linear;
background: #f6f7f8;
background: linear-gradient(to right, #eeeeee 8%, #dddddd 18%, #eeeeee 33%);
background-size: 800px 100px;
top: 201px;
left: 374px;
width: 12px;
height: 12px;
position: absolute;
border-radius: 3px;
}
.loading--masker-imdb-desc {
animation-duration: 1s;
animation-fill-mode: forwards;
animation-iteration-count: infinite;
animation-name: loading--line;
animation-timing-function: linear;
background: #f6f7f8;
background: linear-gradient(to right, #eeeeee 8%, #dddddd 18%, #eeeeee 33%);
background-size: 800px 100px;
top: 218px;
left: 240px;
width: 168px;
height: 15px;
position: absolute;
border-radius: 3px;
}
.loading--masker-idade {
animation-duration: 1s;
animation-fill-mode: forwards;
animation-iteration-count: infinite;
animation-name: loading--line;
animation-timing-function: linear;
background: #f6f7f8;
background: linear-gradient(to right, #eeeeee 8%, #dddddd 18%, #eeeeee 33%);
background-size: 800px 100px;
top: 198px;
left: 575px;
width: 40px;
height: 40px;
position: absolute;
border-radius: 3px;
}
.loading--masker-data-public {
animation-duration: 1s;
animation-fill-mode: forwards;
animation-iteration-count: infinite;
animation-name: loading--line;
animation-timing-function: linear;
background: #f6f7f8;
background: linear-gradient(to right, #eeeeee 8%, #dddddd 18%, #eeeeee 33%);
background-size: 800px 100px;
top: 245px;
left: 195px;
width: 275px;
height: 26px;
position: absolute;
border-radius: 3px;
}
.loading--masker-button-mais {
animation-duration: 1s;
animation-fill-mode: forwards;
animation-iteration-count: infinite;
animation-name: loading--line;
animation-timing-function: linear;
background: #f6f7f8;
background: linear-gradient(to right, #eeeeee 8%, #dddddd 18%, #eeeeee 33%);
background-size: 800px 100px;
top: 245px;
left: 475px;
width: 140px;
height: 26px;
position: absolute;
border-radius: 3px;
}
<div class='text-input__loading loading--line-background'>
<div class='loading--masker-img'></div>
<div class='loading--masker-title'></div>
<div class='loading--masker-views'></div>
<div class='loading--masker-tag'></div>
<div class='loading--masker-ano'></div>
<div class='loading--masker-desc--line--1'></div>
<div class='loading--masker-desc--line--2'></div>
<div class='loading--masker-desc--line--3'></div>
<div class='loading--masker-elenco'></div>
<div class='loading--masker-criador'></div>
<div class='loading--masker-genero'></div>
<div class='loading--masker-duracao'></div>
<div class='loading--masker-imdb'></div>
<div class='loading--masker-imdb-star--1'></div>
<div class='loading--masker-imdb-star--2'></div>
<div class='loading--masker-imdb-star--3'></div>
<div class='loading--masker-imdb-star--4'></div>
<div class='loading--masker-imdb-star--5'></div>
<div class='loading--masker-imdb-star--6'></div>
<div class='loading--masker-imdb-star--7'></div>
<div class='loading--masker-imdb-star--8'></div>
<div class='loading--masker-imdb-star--9'></div>
<div class='loading--masker-imdb-star--10'></div>
<div class='loading--masker-imdb-desc'></div>
<div class='loading--masker-idade'></div>
<div class='loading--masker-data-public'></div>
<div class='loading--masker-button-mais'></div>
</div>