Cargador de contenido parecido a Facebook para la web moderna-mocka

Vista prévia

Descripción

mocka le ayuda a crear un marcador de posición de contenido animado que se puede utilizar como un cargador de contenido como se ve en Facebook.com.

Funcionamiento

Instálelo a través de NPM:

npm install mocka-placeholder

O directamente incluir la hoja de estilos principal ' mocka. css ' en la página HTML.

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

Cree el cargador de contenido siguiendo la estructura HTML como esta:

<div class="mocka-container">

<span class="mocka-media"></span>

<span class="mocka-heading"></span>

<span class="mocka-text"></span>
</div>

mocka está escrito por completo usando Sass, puedes personalizarlo fácilmente según tus necesidades:

$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);