"Facebook News Feed Loading"
Bootstrap 3.0.0 Snippet by jochemstoel

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="timeline-wrapper"> <div class="timeline-item"> <div class="animated-background facebook"> <div class="background-masker header-top"></div> <div class="background-masker header-left"></div> <div class="background-masker header-right"></div> <div class="background-masker header-bottom"></div> <div class="background-masker subheader-left"></div> <div class="background-masker subheader-right"></div> <div class="background-masker subheader-bottom"></div> <div class="background-masker content-top"></div> <div class="background-masker content-first-end"></div> <div class="background-masker content-second-line"></div> <div class="background-masker content-second-end"></div> <div class="background-masker content-third-line"></div> <div class="background-masker content-third-end"></div> </div> </div> </div>
@-webkit-keyframes placeHolderShimmer { 0% { background-position: -468px 0 } 100% { background-position: 468px 0 } } @keyframes placeHolderShimmer { 0% { background-position: -468px 0 } 100% { background-position: 468px 0 } } .timeline-wrapper { background-color: #e9eaed; color: #141823; padding: 20px; border: 1px solid #ccc; } .timeline-item { background: #fff; border: 1px solid; border-color: #e5e6e9 #dfe0e4 #d0d1d5; border-radius: 3px; padding: 12px; margin: 0 auto; max-width: 472px; min-height: 200px; } .animated-background { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-name: placeHolderShimmer; animation-name: placeHolderShimmer; -webkit-animation-timing-function: linear; animation-timing-function: linear; background: #f6f7f8; background: #eeeeee; background: -webkit-gradient(linear, left top, right top, color-stop(8%, #eeeeee), color-stop(18%, #dddddd), color-stop(33%, #eeeeee)); background: -webkit-linear-gradient(left, #eeeeee 8%, #dddddd 18%, #eeeeee 33%); background: linear-gradient(to right, #eeeeee 8%, #dddddd 18%, #eeeeee 33%); -webkit-background-size: 800px 104px; background-size: 800px 104px; height: 96px; position: relative; } .background-masker { background: #fff; position: absolute; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .outlined .background-masker { border: 1px solid #ddd; } .outlined:hover .background-masker { border: none; } .outlined:hover .background-masker:hover { border: 1px solid #ccc; z-index: 1; } .background-masker.header-top, .background-masker.header-bottom, .background-masker.subheader-bottom { top: 0; left: 40px; right: 0; height: 10px; } .background-masker.header-left, .background-masker.subheader-left, .background-masker.header-right, .background-masker.subheader-right { top: 10px; left: 40px; height: 8px; width: 10px; } .background-masker.header-bottom { top: 18px; height: 6px; } .background-masker.subheader-left, .background-masker.subheader-right { top: 24px; height: 6px; } .background-masker.header-right, .background-masker.subheader-right { width: auto; left: 300px; right: 0; } .background-masker.subheader-right { left: 230px; } .background-masker.subheader-bottom { top: 30px; height: 10px; } .background-masker.content-top, .background-masker.content-second-line, .background-masker.content-third-line, .background-masker.content-second-end, .background-masker.content-third-end, .background-masker.content-first-end { top: 40px; left: 0; right: 0; height: 6px; } .background-masker.content-top { height: 20px; } .background-masker.content-first-end, .background-masker.content-second-end, .background-masker.content-third-end { width: auto; left: 380px; right: 0; top: 60px; height: 8px; } .background-masker.content-second-line { top: 68px; } .background-masker.content-second-end { left: 420px; top: 74px; } .background-masker.content-third-line { top: 82px; } .background-masker.content-third-end { left: 300px; top: 88px; }

Related: See More


Questions / Comments: