Skeleton → Content Loader

<div class="sk-card" id="card">
  <div class="sk-media"></div>
  <div class="sk-body"><div class="sk-line w70"></div><div class="sk-line w90"></div><div class="sk-line w50"></div></div>
</div>
<button class="sk-btn" id="reload">Reload</button>

*{box-sizing:border-box}body{text-align:center}
.sk-card{width:300px;background:#fff;border:1px solid #eceef3;border-radius:16px;overflow:hidden;text-align:left;font-family:system-ui,sans-serif;box-shadow:0 8px 24px rgba(20,25,50,.06)}
.sk-media{height:140px;background:#eceef3}
.sk-body{padding:18px}
.sk-line{height:13px;border-radius:6px;background:#eceef3;margin-bottom:11px}
.sk-line.w70{width:70%}.sk-line.w90{width:90%}.sk-line.w50{width:50%}
.sk-card.loading .sk-media,.sk-card.loading .sk-line{background:linear-gradient(90deg,#eceef3 25%,#f6f8fc 50%,#eceef3 75%);background-size:200% 100%;animation:sh 1.3s infinite}
@keyframes sh{to{background-position:-200% 0}}
.sk-card.ready .sk-media{background:linear-gradient(135deg,#ff7a18,#ff477e)}
.sk-card.ready .sk-line{background:#dfe3ec}
.sk-card.ready .sk-line.w70{background:#1a1f36;height:18px}
.sk-btn{margin-top:16px;padding:10px 22px;border:0;border-radius:10px;background:#1a1f36;color:#fff;font-weight:700;cursor:pointer;font-family:system-ui,sans-serif}

var card=document.getElementById('card');
function load(){card.classList.remove('ready');card.classList.add('loading');setTimeout(function(){card.classList.remove('loading');card.classList.add('ready')},1800)}
document.getElementById('reload').onclick=load;
load();