Facebook-like Content Loader For Modern Web – mocka

Preview:

Description:

mocka helps you create an animated content placeholder which can be used as a content loader as you seen on Facebook.com.

How to use it:

Install it via NPM:

npm install mocka-placeholder

Or directly include the main stylesheet ‘mocka.css’ on the html page.

<link href="dist/mocka.css" rel="stylesheet">

Create the content loader following the HTML structure like this:

<div class="mocka-container">
  <span class="mocka-media"></span>
  <span class="mocka-heading"></span>
  <span class="mocka-text"></span>
</div>

mocka is written entirely using Sass, you can easily customize it as per your needs:

$mocka: (
	prefix: 'mocka',
	container: (
		name: 'container',
		width: 20rem,
		height: 9.5rem,
		background: #fafafa,
		border-radius: 0.125rem,
		border: 0.0625rem solid #acacac
	),
	media: (
		name: 'media',
		top: 0.5rem,
		left: 0.5rem,
		width: 4rem,
		height: 4rem,
		border-radius: 0
	),
	heading: (
		name: 'heading',
		top: 1.125rem,
		left: 5rem,
		width-base: 100%,
		width-offset: 5.5rem,
		height: 0.875rem,
		border-radius: 0
	),
	subheading: (
		top: 1.5rem,
		width: 85%,
		height: 0.875rem,
		border-radius: 0
	),
	text: (
		name: 'text',
		top: 5.25rem,
		left: 0.5rem,
		line1-width-base: 85%,
		line1-width-offset: 1rem,
		height: 0.75rem,
		line2-top: 1.25rem,
		line2-width-base: 120%,
		line2-width-offset: 1rem,
		line3-top: 2.5rem,
		line3-width-base: 90%,
		line3-width-offset: 0,
		border-radius: 0
	),
	dots: (
		top: 2rem,
		height: 0.5rem,
		width: 0.5rem,
		space-around: 0.75rem,
		space-between: 0.5rem,
		border-radius: 1rem,
		background: #7a7a7a,
	),
	animation: (
		name: 'dot',
		duration: 1.8s,
		timing-function: ease,
		iteration-count: infinite,
		dot1-y-offset: -0.3125rem,
		dot2-y-offset: -0.4375rem,
		dot3-y-offset: -0.3125rem
	),
	background: #c9c9c9
);
@import '_mocka';
@include mocka($mocka);