3

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:

modelo

O resultado depois do carregamento: site

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>

2

1 Resposta 1

2

Bom tentei usando um método com JS e funcionou, não e aquela coisa profissional, mas atende as necessidades por agora:

EM TESTE AINDA

Eu substitui as class usando o JS, vou deixa o código usando aqui:

$(document).ready(function() {
  setInterval(function() {
    AlteraTimeline();
  }, 3000); // TEMPO DE CARREGAMENTO
});
function AlteraTimeline() {
  $(document).ready(function() {
    // BASTA COLOCA A CLASS QUE ESTA NO TEMPLATE, E POR ULTIMO A QUE VAI APARECER DEPOIS DOS 3 SEGUNDOS
    $('.loading').removeClass('loading').addClass('loading-final');
    // PARA ADICIONAR MAIS E SÓ COPIAR E COLAR A LINHA ACIMA E MODIFICAR AS CLASS :)
});
}

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .