FB Feed Placeholder

fb-feed-placeholder.markdown

FB Feed Placeholder

Facebook Feed Placeholder Story

A Pen by Gilberto Tavares on CodePen.

License.

index.html

<body>
  <div class="fb-placeholder-history _4-u2 mbl _5us6 _4-u8" id="u_ps_0_0_m">
    <div class="_2iwo _5usc" data-testid="fbfeed_placeholder_story">
      <div class="_2iwq">
        <div class="_2iwr"></div>
        <div class="_2iws"></div>
        <div class="_2iwt"></div>
        <div class="_2iwu"></div>
        <div class="_2iwv"></div>
        <div class="_2iww"></div>
        <div class="_2iwx"></div>
        <div class="_2iwy"></div>
        <div class="_2iwz"></div>
        <div class="_2iw-"></div>
        <div class="_2iw_"></div>
        <div class="_2ix0"></div>
      </div>
    </div>
  </div>
</body>

style.scss

body {
  background-color: #e9ebee;
  color: #1d2129;
  margin: 0;
  padding-top: 11px;
}

.fb-placeholder-history {
  width: 500px;
  position: relative;
  left: 50%;
  margin-left: -250px;
}

._4-u2 {
  border: 1px solid;
  border-color: #e5e6e9 #dfe0e4 #d0d1d5;
  border-radius: 3px;
}

._4-u8 {
  background-color: #fff;
}

._2iwo {
  height: 300px;
  padding: 12px;
}

._5usc {
  display: block;
  text-align: center;
}

._2iwq {
  animation-duration: 1s;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-name: placeHolderShimmer;
  animation-timing-function: linear;
  background: #f6f7f9;
  background-image: linear-gradient(to right, #f6f7f9 0%, #e9ebee 20%, #f6f7f9 40%, #f6f7f9 100%);
  background-repeat: no-repeat;
  background-size: 800px 104px;
  height: 104px;
  position: relative;

  div {
    background: #fff;
    height: 6px;
    left: 0;
    position: absolute;
    right: 0;
  }
}

div {
  &._2iwr {
    height: 40px;
    left: 40px;
    right: auto;
    top: 0;
    width: 8px;
  }
  &._2iws {
    height: 8px;
    left: 48px;
    top: 0;
  }
  &._2iwt {
    left: 136px;
    top: 8px;
  }
  &._2iwu {
    height: 12px;
    left: 48px;
    top: 14px;
  }
  &._2iwv {
    left: 100px;
    top: 26px;
  }
  &._2iww {
    height: 10px;
    left: 48px;
    top: 32px;
  }
  &._2iwx {
    height: 20px;
    top: 40px;
  }
  &._2iwy {
    left: 410px;
    top: 60px;
  }
  &._2iwz {
    height: 13px;
    top: 66px;
  }
  &._2iw- {
    left: 440px;
    top: 79px;
  }
  &._2iw_ {
    height: 13px;
    top: 85px;
  }
  &._2ix0 {
    left: 178px;
    top: 98px;
  }
}

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