Skeleton Screen/加载占位图 http://cloudcannon.com/deconstructions/2014/11/15/facebook-content-placeholder-deconstruction.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Facebook content placeholder deconstruction</title> <style type="text/css"> .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; } @keyframes placeHolderShimmer{ 0%{ background-position: -468px 0 } 100%{ background-position: 468px 0 } } .animated-background { animation-duration: 1s; animation-fill-mode: forwards; animation-iteration-count: infinite; animation-name: placeHolderShimmer; animation-timing-function: linear; background: #f6f7f8; background: linear-gradient(to right, #eeeeee 8%, #dddddd 18%, #eeeeee 33%); background-size: 800px 104px; height: 96px; position: relative; } .background-masker { background: #fff; position: absolute; } /* Every thing below this is just positioning */ .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; } </style> </head> <body> <div class="timeline-wrapper"> <div class="timeline-item"> <div class="animated-background"> <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> </body> <!-- <script src="http://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script> --> </html> 提示：你可以先修改部分代码再运行。 转载请注明：有爱前端 » 载入前灰色占位 喜欢 (0)or分享 (0)
