<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <div class="postCard"> <h3 class="postCard__title skeleton"> </h3> <div class="postCard__content skeleton"> </div> <div class="postCard__flex"> <div> <strong class="postCard__strong skeleton"> </strong> </div> <div class="postCard__btn skeleton"> </div> </div> </div> <div class="postCard"> <h3 class="postCard__title skeleton"> </h3> <div class="postCard__content skeleton"> </div> <div class="postCard__flex"> <div> <strong class="postCard__strong skeleton"> </strong> </div> <div class="postCard__btn skeleton"> </div> </div> </div> <div class="postCard"> <h3 class="postCard__title skeleton"> </h3> <div class="postCard__content skeleton"> </div> <div class="postCard__flex"> <div> <strong class="postCard__strong skeleton"> </strong> </div> <div class="postCard__btn skeleton"> </div> </div> </div> </div> </div>

/* skeleton */ .skeleton { background-color: #e2e5e7; border-radius: 5px; background-image: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0)); background-size: 40px 100%; background-repeat: no-repeat; background-position: left -40px top 0; animation: shine 1s ease infinite; } @-webkit-keyframes shine { to { background-position: right -40px top 0; } } @keyframes shine { to { background-position: right -40px top 0; } } /* post card */ .postCard{ padding: 20px 15px; border: 1px solid #f3f3f3; border-radius: 5px; margin-top: 20px; } .postCard__title{ font-size: 20px; margin-bottom: 6px; } .postCard__title.skeleton{ height: 30px; } .postCard__content.skeleton{ height: 100px; } .postCard__flex{ display: flex; justify-content: space-between; gap: 20px; margin-top: 15px; } .postCard__strong{ font-weight: 500; margin-right: 5px; } .postCard__strong.skeleton{ height: 30px; display: block; width: 100px; } .postCard__btn{ font-weight: 500; color: #ef3d3d; } .postCard__btn.skeleton{ height: 30px; width: 100px; }