How to create a placeholder when loading page content, same as facebook, youtube, etc.

Navigation
3

This is a question asked on various websites, and before I came here, I asked a lot, even on the stackoverflow in English.

Well the part of the placeholder in html and css is already ready, I got following tutorials on several sites, missing just one method to implement in Wordpress:

Template to load first:

Theresultafterloading:

Oneoptionthatmightbefeasiblewastodisplaytheplaceholderwhilethepageisloadedandthenremovethediv/classcsswithJSorcreateafunctioninPHPtoshowthistemplatefirstandthenreplaceitwiththeloadedcontent.

Someonewouldhaveacluehowtodothis,thequestionseemstobeoutofscope,howeveranyhelpiswelcome.

Placeholdertemplateforanyonewhowantstouse:

/* 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>
    
asked by anonymous 16.06.2018 / 19:51

1 answer

2

Well I tried using a method with JS and it worked, it's not that professional thing, but it meets the needs for now:

IreplacetheclassusingJS,I'llleavethecodehere:

$(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 :)
});
}
    
16.06.2018 / 23:19
How to put + of a domain in this code, different references Average is not calculated