{}
Skeleton Loader
css
js
html
libs + Add Library
HTML
<div class="container"> <div class="cols"> <div class="col"> <div class="sk_bg big"></div> <div class="sk_bg small"></div> <div class="sk_bg small2"></div> </div> <div class="col"> <div class="sk_bg big"></div> <div class="sk_bg small"></div> <div class="sk_bg small2"></div> </div> <div class="col"> <div class="sk_bg big"></div> <div class="sk_bg small"></div> <div class="sk_bg small2"></div> </div> <div class="col"> <div class="sk_bg big"></div> <div class="sk_bg small"></div> <div class="sk_bg small2"></div> </div> </div> <div class="cols"> <div class="col"> <div class="sk_bg big"></div> <div class="sk_bg small"></div> <div class="sk_bg small2"></div> </div> <div class="col"> <div class="sk_bg big"></div> <div class="sk_bg small"></div> <div class="sk_bg small2"></div> </div> <div class="col"> <div class="sk_bg big"></div> <div class="sk_bg small"></div> <div class="sk_bg small2"></div> </div> <div class="col"> <div class="sk_bg big"></div> <div class="sk_bg small"></div> <div class="sk_bg small2"></div> </div> </div> </div>
CSS
* { margin: 0; padding: 0; box-sizing: border-box; } .container { max-width: 1024px; margin: 50px auto; text-align: center; } .cols { display: flex; align-items: center; justify-content: center; margin-bottom: 30px; } .col { margin: 0 15px; width: 200px; } .sk_bg { animation-duration: 1s; animation-fill-mode: forwards; animation-iteration-count: infinite; animation-name: sk_bg_animation; animation-timing-function: linear; background: #f6f7f8; background: linear-gradient(to right, #eee 8%, #ddd 18%, #eee 33%); background-size: 800px 104px; position: relative; width: 100%; margin-bottom: 10px; } .sk_bg.big { height: 96px; } .sk_bg.small { height: 20px; } .sk_bg.small2 { height: 15px; } @keyframes sk_bg_animation{ 0%{background-position:-468px 0} 100%{background-position:468px 0} } @-webkit-keyframes sk_bg_animation{ 0%{background-position:-468px 0} 100%{background-position:468px 0} }
JS