Facebook Loader Fake UI

dabblet.css

/**
 * Facebook Loader Fake UI
 */
@-webkit-keyframes loaderFx{
	0%{
		background-position:-460px 0
	}
	100%{
		background-position:460px 0
	}
}
html *{
	box-sizing:border-box;
}

body{
	background: #ededed;
	padding-top:50px;
}
h2{
	font-family:Verdana,Arial;
	font-weight:400;
	color:#999;
	text-shadow:2px 2px  #fbfbfb;
}
.wrapper{
	height:auto;
	width:auto;
}
.wrapper:not(:last-child){
margin-bottom:1.250em
}

.fake-ui{
	background:#f6f7f8;
	position:absolute;
	background-image: -webkit-linear-gradient(left, #f6f7f8 0%, #edeef1 20%, #f6f7f8 40%, #f6f7f8 100%);
	background-size: 800px 100px;
	-webkit-animation: 1s forwards infinite loaderFx linear;
}
.wrapper .loader.facebook-history,
.wrapper .loader.twitter-tweet{
	background:#fff;
	border:1px solid #ddd;
	border-radius:.313em;
	padding:.625em;
	position:relative;
}

.wrapper .loader.facebook-history{
	height:150px;
	width:450px;
}
.wrapper .loader.twitter-tweet{
	height:115px;
	width:500px;
}


.facebook-history .fake-ui.fake-avatar{
	height:50px;
	width:50px;
	top:10px;
	left:10px;
}

.facebook-history .fake-ui.fake-actor{
	width:170px;
	height:8px;
	top:20px;
	left: 70px;
}

.facebook-history .fake-ui.fake-timestamp{
	width:120px;
	height:8px;
	top:40px;
	left: 70px;
}
.facebook-history .fake-ui.fake-content-1{
	width:370px;
	height:8px;
	top:80px
}
.facebook-history  .fake-ui.fake-content-2{
	width:420px;
	height:8px;
	top:100px
}
.facebook-history  .fake-ui.fake-content-3{
	width:330px;
	height:8px;
	top:120px
}

.twitter-tweet .fake-ui.fake-avatar{
	height:50px;
	width:50px;
	border-radius:.625em;
}
.twitter-tweet .fake-ui.fake-actor{
	height:10px;
	width:100px;
	left:70px;
	top:15px
}
.twitter-tweet .fake-ui.fake-timestamp{
	height:6px;
	width:100px;
	left:180px;
	top:18px
}
.twitter-tweet .fake-ui.fake-content-1{
	top:40px;
	left:70px;
	width:400px;
	height:10px;
}
.twitter-tweet .fake-ui.fake-content-2{
	top:60px;
	left:70px;
	width:380px;
	height:10px;
}
.twitter-tweet .fake-ui.fake-btn{
	width:60px;
	height:15px;
	bottom:10px;
	
}
.twitter-tweet .fake-ui.fake-btn:nth-child(1){
	right:10px;
}
.twitter-tweet .fake-ui.fake-btn:nth-child(2){
	right:80px;
}
.twitter-tweet .fake-ui.fake-btn:nth-child(3){
	right:150px;
}

dabblet.html

<section>
	<h2>Facebook History</h2>
	<div class="wrapper">
		<div class="loader facebook-history">
			<div class="fake-ui fake-avatar"></div>
			<div class="fake-ui fake-actor"></div>
			<div class="fake-ui fake-timestamp"></div>
			<div class="fake-ui fake-content-1"></div>
			<div class="fake-ui fake-content-2"></div>
			<div class="fake-ui fake-content-3"></div>
		</div>
	</div>
	
	<div class="wrapper">
		<div class="loader facebook-history">
			<div class="fake-ui fake-avatar"></div>
			<div class="fake-ui fake-actor"></div>
			<div class="fake-ui fake-timestamp"></div>
			<div class="fake-ui fake-content-1"></div>
			<div class="fake-ui fake-content-2"></div>
			<div class="fake-ui fake-content-3"></div>
		</div>
	</div>
</section>
<section>
	<h2>Twitter Tweet</h2>
	<div class="wrapper">
		<div class="loader twitter-tweet">
			<div class="fake-ui fake-avatar"></div>
			<div class="fake-ui fake-actor"></div>
			<div class="fake-ui fake-timestamp"></div>
			<div class="fake-ui fake-content-1"></div>
			<div class="fake-ui fake-content-2"></div>
			<div class="btn-group">
				<div class="fake-ui fake-btn"></div>
				<div class="fake-ui fake-btn"></div>
				<div class="fake-ui fake-btn"></div>
			</div>
		</div>
	</div>
	<div class="wrapper">
		<div class="loader twitter-tweet">
			<div class="fake-ui fake-avatar"></div>
			<div class="fake-ui fake-actor"></div>
			<div class="fake-ui fake-timestamp"></div>
			<div class="fake-ui fake-content-1"></div>
			<div class="fake-ui fake-content-2"></div>
			<div class="btn-group">
				<div class="fake-ui fake-btn"></div>
				<div class="fake-ui fake-btn"></div>
				<div class="fake-ui fake-btn"></div>
			</div>
		</div>
	</div>
</section>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}