Facebook content placeholder

by Avinashullal

HTML

<div class="timeline-wrapper">
	<div class="timeline-item">
		<div class="animated-background facebook">
			<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>

CSS

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

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

	.timeline-wrapper {
		background-color: #e9eaed;
		color: #141823;
		padding: 20px;
		border: 1px solid #ccc;
	}

	.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;
	}

	.animated-background {
		-webkit-animation-duration: 1s;
		animation-duration: 1s;
		-webkit-animation-fill-mode: forwards;
		animation-fill-mode: forwards;
		-webkit-animation-iteration-count: infinite;
		animation-iteration-count: infinite;
		-webkit-animation-name: placeHolderShimmer;
		animation-name: placeHolderShimmer;
		-webkit-animation-timing-function: linear;
		animation-timing-function: linear;
		background: #f6f7f8;
		background: #eeeeee;
		background: -webkit-gradient(linear, left top, right top, color-stop(8%, #eeeeee), color-stop(18%, #dddddd), color-stop(33%, #eeeeee));
		background: -webkit-linear-gradient(left, #eeeeee 8%, #dddddd 18%, #eeeeee 33%);
		background: linear-gradient(to right,  #eeeeee 8%,#dddddd 18%,#eeeeee 33%);
		-webkit-background-size: 800px 104px;
		background-size: 800px 104px;
		height: 96px;
		position: relative;
	}

	.background-masker {
		background: #fff;
		position: absolute;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
	}

	.outlined .background-masker {
		border: 1px solid #ddd;
	}


	.outlined:hover .background-masker {
		border: none;
	}

	.outlined:hover .background-masker:hover {
		border: 1px solid #ccc;
		z-index: 1;
	}

	.background-masker.header-top,
	.background-masker.header-bottom,
	.background-masker.subheader-bottom {
		top: 0;
		left: 40px;
		right: 0;
		height:...