I attempted to incorporate a Placeholder Loading Card into my bootstrap 4 website by adding a sample image, but encountered an issue.
The placeholder does not work when the website is loading. Is it supposed to always animate?
Does anyone have knowledge on how to correctly implement this feature?
https://i.stack.imgur.com/bP1yZ.png
This is the relevant part of my code:
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>