Bollate

HTML

[ANSWERED] What packages or html is used to create page loading indicators that look like the data that will be populated once the data is fetched

By

Nov 20, 2022 ,

Solution 1 :

Are you looking for this type of things? I have found a link that explains a bit on that, you should see. View their demo on this codepen also.

As per I know there were no libraries for this effect. They are custom made thing. You can Google it by typing ” Content placeholder effect “. Also you can refer this link for detailed information : https://cloudcannon.com/deconstructions/2014/11/15/facebook-content-placeholder-deconstruction.html

   

const cardImage = document.querySelector('.card-image');
const cardTitle = document.querySelector('.card-title');
const cardDesc = document.querySelector('.card-description');


const renderCard = () => {
  cardTitle.textContent = 'Card Title Yo!';
  cardDesc.textContent = 'Lorem ipsum dolor, sit amet consectetur adipisicing elit. Vero dicta repellat quibusdam assumenda at distinctio similique eos? Officiis voluptatem accusamus, id odit, quos eaque nemo, dicta quidem eum eligendi veritatis.';
  createImage();
  cardTitle.classList.remove('loading');
  cardDesc.classList.remove('loading');
  cardImage.classList.remove('loading');
};

function createImage() {
  const img = new Image();
  img.classList.add("image");
  img.setAttribute('alt', 'A cloud day at a mountain base');
  img.setAttribute('src', 'https://images.unsplash.com/photo-1516646255117-f9f933680173?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=dc874984018a4253ba7d2a3c53387135');
  cardImage.appendChild(img);
}

setTimeout(() => {
  renderCard();
}, 5000);

// window.addEventListener('load', () => {
//   renderCard();
// });
body {
  background: #f4f4f4;
  margin: 0;
  padding: 0;
  font-family: system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue;
  color: #333;
}

.container {
  margin: 2rem auto;
  max-width: 800px;
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
          justify-content: center;
}

.card {
  overflow: hidden;
  background: white;
  border-radius: .25rem;
  max-width: 380px;
  width: 380px;
  box-shadow: 0 15px 30px 0 rgba(0, 0, 0, 0.05), 0 5px 15px 0 rgba(0, 0, 0, 0.05);
  -webkit-transition: ease box-shadow 0.3s;
  transition: ease box-shadow 0.3s;
}
.card:hover {
  box-shadow: 0 15px 60px 0 rgba(0, 0, 0, 0.08), 0 5px 25px 0 rgba(0, 0, 0, 0.08);
}

.card-detail {
  padding: .5rem 1rem;
}
.card-detail h3 {
  font-size: 1.5rem;
  margin-bottom: none;
  line-height: .09;
}
.card-detail p {
  line-height: 1.3rem;
}

.card-image {
  margin: 0;
  padding: 0;
  height: 200px;
  overflow: hidden;
}
.card-image img {
  max-width: 100%;
  height: auto;
}

.loading {
  position: relative;
  background-color: #E2E2E2;
}
.loading.card-image {
  border-radius: 0;
}
.loading::after {
  display: block;
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-transform: translateX(-100%);
          transform: translateX(-100%);
  background: -webkit-gradient(linear, left top, right top, from(transparent), color-stop(rgba(255, 255, 255, 0.2)), to(transparent));
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  -webkit-animation: loading 1.5s infinite;
          animation: loading 1.5s infinite;
}

@-webkit-keyframes loading {
  100% {
    -webkit-transform: translateX(100%);
            transform: translateX(100%);
  }
}

@keyframes loading {
  100% {
    -webkit-transform: translateX(100%);
            transform: translateX(100%);
  }
}
.card-title.loading {
  height: 1.8rem;
}

.card-image.image {
  max-width: 100%;
  height: auto;
}

.card-description.loading {
  height: 80px;
}
<div class="container">
  <section class="card">
    <figure class="card-image loading"></figure>
    <div class="card-detail">
      <h3 class="card-title loading"></h3>
      <p class="card-description loading"></p>
    </div>
  </section>
</div>

Solution 2 :

Css will be used for the loading animation !!!
While fetching the data animation keeps on running.

Once the data is fetched then stop the animation

https://loading.io/css/

Here is a simple animation

<div class="lds-dual-ring"></div>
.lds-dual-ring {
  display: inline-block;
  width: 80px;
  height: 80px;
}
.lds-dual-ring:after {
  content: " ";
  display: block;
  width: 64px;
  height: 64px;
  margin: 8px;
  border-radius: 50%;
  border: 6px solid #fff;
  border-color: #fff transparent #fff transparent;
  animation: lds-dual-ring 1.2s linear infinite;
}
@keyframes lds-dual-ring {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

Problem :

I’ve noticed that some websites now days have the ability to have a type of element filler on a page where data is located before it loads or fetches it from the server.

In some cases it flashes a little bit or is slightly animated, to show that data is filling in that area of the page.

What is this, are there packages for it, etc?
Is there a name for it so I can google it?

And just to be clear, I’m not talking about spinners

ex. Airbnb uses this method when you load up pages on their site. I also see it on Okcupid.com

Comments

Comment posted by user1186050

ya like that!!! is there a name for it. I think I see “skeleton screen” but not sure if this is the technical name for it? and are there libraries or are they all custom built?

Comment posted by cloudcannon.com/deconstructions/2014/11/15/…

As per I know there were no libraries for this effect. You can Google it by typing ” Content placeholder effect “. Also refer this link for Detailed information :

Comment posted by user1186050

not sure if this is what I’m looking for, are you saying that sites like Airbnb and Okcupid use pure css solutions? It seems like there would be some good libraries out there, but just don’t know what I would use to google? Or if you think they use one or more of the animations from loading.io, can you tell me which ones you think they use?

Comment posted by Engineer S. Saad

I think they will use the animation !!! If they have libraries then it will be having the CSS and jQuery or other front end animation !!

Comment posted by user1186050

can you be more specific as to which animation?

Comment posted by Engineer S. Saad

i mean to say that you have to build the animations in CSS, SASS, there are alot of animation are available internet. Just name it and you will have the code. you can modify it or use it as the same. !!

By

Related Post

HTML

[ANSWERED] javascript – Locomotive Scroll not working with Vue.js when having to load images on page

Nov 20, 2022
HTML

[ANSWERED] html – How to import/veiw STL files in a wordpress website?

Nov 20, 2022
HTML

[ANSWERED] javascript – How to handle repeating values in JQuery

Nov 20, 2022

You missed

HTML

[ANSWERED] javascript – Text box to display updated text and save on button click

Nov 20, 2022
HTML

[ANSWERED] javascript – Pass html tag to angularjs variable from controller

Nov 20, 2022
HTML

[ANSWERED] html – bootstrap mobile menu not scrolling instead the background is scrolling

Nov 20, 2022
HTML

[ANSWERED] html – How to play live stream YouTube videos using CEF4Delphi?

Nov 20, 2022