Placeholder Loading Card not working correctly

Question

I tried to create my bootstrap 4 web site to Placeholder Loading Card , i added sample image but i have some issue,

place holder not working in when the web site loading , is it always animate

anyone know how to do that correctly like this image

that is my code part

body {
  padding: 20px;
}

.container {
  display: flex;
  border: 1px solid #eaecef;
  height: 200px;
  padding: 1%;
  background-color: white;
  box-shadow: 2px 5px 5px 1px lightgrey;
}

.img-container {
  width: 15%;
  padding: 20px;
}

.img {
  border: 1px solid white;
  width: 100%;
  height: 100%;
  background-color: #babbbc;
}

.content {
  border: 1px solid white;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  padding: 20px;
  justify-content: space-between;
}

.stripe {
  border: 1px solid white;
  height: 20%;
  background-color: #babbbc;
}

.small-stripe {
  width: 40%;
}

.medium-stripe {
  width: 70%;
}

.long-stripe {
  width: 100%;
}

.container.loading .img, .container.loading .stripe {
  animation: hintloading 2s ease-in-out 0s infinite reverse;
  -webkit-animation: hintloading 2s ease-in-out 0s infinite reverse;
}

@keyframes hintloading
{
  0% {
    opacity: 0.5;
  }
  50%  {
    opacity: 1;
  }
  100% {
    opacity: 0.5;
  }
}

@-webkit-keyframes hintloading
{
  0% {
    opacity: 0.5;
  }
  50%  {
    opacity: 1;
  }
  100% {
    opacity: 0.5;
  }
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<div class='container loading'>
  <div class='img-container'>
    <div class='img'>
      <img  src="https://image.freepik.com/free-photo/group-of-diverse-people-having-a-business-meeting_53876-25060.jpg">
    </div>
  </div>
  <div class='content'>
    <div class='stripe small-stripe'>wewe
    </div>
    <div class='stripe medium-stripe'>ewe
    </div>
    <div class='stripe long-stripe'>wewe
    </div>
  </div>
</div>

Answer 1

you need to disable the content placeHolder animation after page end load :

$(document).ready(function(){
    $(".container.loading .img, .container.loading .stripe").css("animation", "none");
    $(".container.loading .img, .container.loading .stripe").css("-webkit-animation", "none");
})

body {
  padding: 20px;
}

.container {
  display: flex;
  border: 1px solid #eaecef;
  height: 200px;
  padding: 1%;
  background-color: white;
  box-shadow: 2px 5px 5px 1px lightgrey;
}

.img-container {
  width: 15%;
  padding: 20px;
}

.img {
  border: 1px solid white;
  width: 100%;
  height: 100%;
  background-color: #babbbc;
}

.content {
  border: 1px solid white;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  padding: 20px;
  justify-content: space-between;
}

.stripe {
  border: 1px solid white;
  height: 20%;
  background-color: #babbbc;
}

.small-stripe {
  width: 40%;
}

.medium-stripe {
  width: 70%;
}

.long-stripe {
  width: 100%;
}

.container.loading .img, .container.loading .stripe {
  animation: hintloading 2s ease-in-out 0s infinite reverse;
  -webkit-animation: hintloading 2s ease-in-out 0s infinite reverse;
}

@keyframes hintloading
{
  0% {
    opacity: 0.5;
  }
  50%  {
    opacity: 1;
  }
  100% {
    opacity: 0.5;
  }
}

@-webkit-keyframes hintloading
{
  0% {
    opacity: 0.5;
  }
  50%  {
    opacity: 1;
  }
  100% {
    opacity: 0.5;
  }
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>

<div class='container loading'>
  <div class='img-container'>
    <div class='img'>
      <img  src="https://image.freepik.com/free-photo/group-of-diverse-people-having-a-business-meeting_53876-25060.jpg">
    </div>
  </div>
  <div class='content'>
    <div class='stripe small-stripe'>wewe
    </div>
    <div class='stripe medium-stripe'>ewe
    </div>
    <div class='stripe long-stripe'>wewe
    </div>
  </div>
</div>

To see the effect of Content PlaceHolder i do this example where the data will be loaded after 3 seconds :

loadData = function(){
  setTimeout(function(){
     $(".content div").html("wewe");
     $(".img img").attr('src', 'https://image.freepik.com/free-photo/group-of-diverse-people-having-a-business-meeting_53876-25060.jpg');

     $(".container.loading .img, .container.loading .stripe").css("animation", "none");
     $(".container.loading .img, .container.loading .stripe").css("-webkit-animation", "none");
  }, 3000);
}

loadData();

body {
  padding: 20px;
}

.container {
  display: flex;
  border: 1px solid #eaecef;
  height: 200px;
  padding: 1%;
  background-color: white;
  box-shadow: 2px 5px 5px 1px lightgrey;
}

.img-container {
  width: 15%;
  padding: 20px;
}

.img {
  border: 1px solid white;
  width: 100%;
  height: 100%;
  background-color: #babbbc;
}

.content {
  border: 1px solid white;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  padding: 20px;
  justify-content: space-between;
}

.stripe {
  border: 1px solid white;
  height: 20%;
  background-color: #babbbc;
}

.small-stripe {
  width: 40%;
}

.medium-stripe {
  width: 70%;
}

.long-stripe {
  width: 100%;
}

.container.loading .img, .container.loading .stripe {
  animation: hintloading 2s ease-in-out 0s infinite reverse;
  -webkit-animation: hintloading 2s ease-in-out 0s infinite reverse;
}

@keyframes hintloading
{
  0% {
    opacity: 0.5;
  }
  50%  {
    opacity: 1;
  }
  100% {
    opacity: 0.5;
  }
}

@-webkit-keyframes hintloading
{
  0% {
    opacity: 0.5;
  }
  50%  {
    opacity: 1;
  }
  100% {
    opacity: 0.5;
  }
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>

<div class='container loading'>
  <div class='img-container'>
    <div class='img'>
      <img>
    </div>
  </div>
  <div class='content'>
    <div class='stripe small-stripe'>
    </div>
    <div class='stripe medium-stripe'>
    </div>
    <div class='stripe long-stripe'>
    </div>
  </div>
</div>