Skip to content

Instantly share code, notes, and snippets.

@camaleaun

camaleaun/fb-feed-placeholder.markdown

Created August 17, 2016 02:17
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save camaleaun/a8a3872201516c87a8aa256d2601c9a7 to your computer and use it in GitHub Desktop.
Save camaleaun/a8a3872201516c87a8aa256d2601c9a7 to your computer and use it in GitHub Desktop.
Download ZIP
FB Feed Placeholder
Raw
fb-feed-placeholder.markdown
Raw
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>
Raw
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;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment