Placeholder Loading Card not working correctly - html

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>