How can I show CSS placeholder skeletons and hide them when content or page is fully loaded

Question

I have CSS placeholders/skeleton animations and some content in PHP and HTML. I want to show these placeholders when the page is initially opened (even before it finishes loading) and hide them when the page is fully loaded to show the content to show the content.

My html content include carousels and cards that hold data from the database.

.placeholder {
  display: inline-block;
  min-height: 1em;
  vertical-align: middle;
  cursor: wait;
  background-color: currentColor;
  opacity: .5;
  border-radius: 50px;
}

.placeholder.btn::before {
  display: inline-block;
  content: ""
}

.placeholder-xs {
  min-height: .6em
}

.placeholder-sm {
  min-height: .8em
}

.placeholder-lg {
  min-height: 1.2em
}

.placeholder-xl {
  min-height: 6rem;
  border-radius: 6px !important;
}

.placeholder-ml {
  min-height: 4rem;
  border-radius: 6px !important;
}

.placeholder-glow .placeholder {
  -webkit-animation: placeholder-glow 2s ease-in-out infinite;
  animation: placeholder-glow 2s ease-in-out infinite
}

@-webkit-keyframes placeholder-glow {
  50% {
    opacity: .2
  }
}

@keyframes placeholder-glow {
  50% {
    opacity: .2
  }
}

.placeholder-wave {
  -webkit-mask-image: linear-gradient(130deg, #000 55%, rgba(0, 0, 0, 0.8) 75%, #000 95%);
  mask-image: linear-gradient(130deg, #000 55%, rgba(0, 0, 0, 0.8) 75%, #000 95%);
  -webkit-mask-size: 200% 100%;
  mask-size: 200% 100%;
  -webkit-animation: placeholder-wave 2s linear infinite;
  animation: placeholder-wave 2s linear infinite
}

@-webkit-keyframes placeholder-wave {
  100% {
    -webkit-mask-position: -200% 0%;
    mask-position: -200% 0%
  }
}

@keyframes placeholder-wave {
  100% {
    -webkit-mask-position: -200% 0%;
    mask-position: -200% 0%
  }
}


  Hello
    
  
  
  You have
    
       Ongoing
    
    Farm Activities
  


  
    
      
        
          My Farm
          
        
      
    
    
      
        
          Training
          
        
      
    
    
      
        
          Our Shop
          
        
      
    
    
      
        
          Trends

Please help. Thank you

user_2500257 · Answer

Here is a simple example. You can use window.onload to invoke a function when the page is loaded. Then you can add a class to so that you will be able to change the CSS accordingly. I just added a one second delay for the demonstration as this is a very small DOM and loads quickly.

window.onload = function(){ 
  setTimeout(()=>{ // just for demo
    document.body.classList.add('loaded');
  }, 1000)
};

.container{
  width:50%;
  margin-bottom:10px
}

.placeholder {
  animation: skeleton 1s linear infinite alternate;
}
.placeholder .content{
  visibility: hidden
}

@keyframes skeleton {
  0% {
    background-color: hsl(200, 20%, 80%);
  }
  100% {
    background-color: hsl(200, 20%, 95%);
  }
}

body.loaded .placeholder{
  animation: none
}

body.loaded .placeholder .content{
  visibility: visible
}


  
    I'm Loaded
Place holder is gone...
...
  



  I'm smaller

How can I show CSS placeholder skeletons and hide them when content or page is fully loaded

1 Answers