how to create placeholder while loading like facebook

前端未结

关注

 3  508

北海茫月

How to create background loading lines like facebook did while loading the content using angular js.

$\"screenshot\"$

相关标签:

3条回答

南旧

2021-01-30 02:20
You could have a look at this blog post which describes in detail how the placeholders on Facebook work:

http://cloudcannon.com/deconstructions/2014/11/15/facebook-content-placeholder-deconstruction.html

Essentially, you put in some static html styled with css to look similar to the content that is coming.
```
<div class="placeholder">
  
</div>
```
When you are finished loading, you remove the placeholder:
```
$(".placeholder").remove();
```
0 讨论(0)
发布评论:

提交评论
- 加载中...

别跟我提以往

2021-01-30 02:28

You can make it with some css background linear-gradient:

@keyframes placeHolderShimmer{
    0%{
        background-position: -468px 0
    }
    100%{
        background-position: 468px 0
    }
}
.linear-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%, #ffffdffffd 18%, #eeeeee 33%);
    background-size: 1000px 104px;
    height: 338px;
    position: relative;
    overflow: hidden;
}

<div class="linear-background">
  
  
</div>

And paint with divs in white for a effect:

@keyframes placeHolderShimmer{
    0%{
        background-position: -468px 0
    }
    100%{
        background-position: 468px 0
    }
}

.linear-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%, #ffffdffffd 18%, #eeeeee 33%);
    background-size: 1000px 104px;
    height: 200px;
    position: relative;
    overflow: hidden;
}
.inter-draw{
  background: #FFF;
  width: 100%;
  height: 100px;
  position: absolute;
  top: 100px;
}
.inter-right--top{
  background: #FFF;
  width: 100%;
  height: 20px;
  position: absolute;
  top: 20px;
  left: 100px;
}
.inter-right--bottom{
  background: #FFF;
  width: 100%;
  height: 50px;
  position: absolute;
  top: 60px;
  left: 100px;
}
.inter-crop{
  background: #FFF;
  width: 20px;
  height: 100%;
  position: absolute;
  top: 0;
  left: 100px;
}

<div class="linear-background">
  <div class="inter-draw"></div>
  <div class="inter-crop"></div>
  <div class="inter-right--top"></div>
  <div class="inter-right--bottom"></div>
</div>

If you need to do multiple, this can be laborious, so this library automates: placeload.js

0 讨论(0)

被撕碎了的回忆

2021-01-30 02:32

If you guys ever need a npm package for placeholder loading animation, I made this: https://github.com/zalog/placeholder-loading

It's a library that can be configured as you need.
It's responsive, fast, simple, gpu optimized animation and css only.

Demo:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Demo placeholder-loading</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://unpkg.com/placeholder-loading/dist/css/placeholder-loading.min.css" rel="stylesheet">
  </head>
  <body>

    <div class="ph-item">

      <div class="ph-col-2">
        <div class="ph-avatar"></div>
      </div>

      <div>
        <div class="ph-row">
          <div class="ph-col-4"></div>
          <div class="ph-col-8 empty"></div>
          <div class="ph-col-6"></div>
          <div class="ph-col-6 empty"></div>
          <div class="ph-col-2"></div>
          <div class="ph-col-10 empty"></div>
        </div>
      </div>

      <div class="ph-col-12">
        <div class="ph-picture"></div>
        <div class="ph-row">
          <div class="ph-col-10 big"></div>
          <div class="ph-col-2 empty big"></div>
          <div class="ph-col-4"></div>
          <div class="ph-col-8 empty"></div>
          <div class="ph-col-6"></div>
          <div class="ph-col-6 empty"></div>
          <div class="ph-col-12"></div>
        </div>
      </div>

    </div>

  </body>
</html>

0 讨论(0)