How to create a reserved space when loading page content, same as facebook, youtube, etc

Question

How to create a reserved space when loading page content, same as facebook, youtube, etc

Asked 6 years ago

Viewed 185 times

3

This is a question asked on several sites on the internet, and before I came here to ask I researched a lot, even in stackoverflow in English.

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

Template to load first:

The result after loading:

One option that might be feasible, was to display that placeholder while the page is loaded and then remove the div/class css with JS or create a PHP function to display that template first and then replace it with loaded content.

Someone would have a sense of how to do that, the question seems this out of scope, however any help and welcome.

Placeholder template for those who want to use:

/* 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>

This is called "Skeleton screens" or "Content Placeholder". See : https://cloudcannon.com/deconstructions/2014/11/15/facebook-content-placeholder-deconstruction.html which may help you more...

– Matheus Miranda

2018/06/16 at 21:37
Already have library ready for this: https://github.com/zalog/placeholder-loading

– Matheus Miranda

2018/06/16 at 21:42

1 answer

Browser other questions tagged php javascript html css

You are not signed in. Login or sign up in order to post.

by Vitor Hugo • **379** points · Answer 1 · 2018-06-16T21:19:08+00:00

Good tried using a method with JS and worked, not and that professional thing, but meets the needs for now:

I replace the classes using JS, I’ll leave the code using here:

$(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 :)
});
}