html 加载占位,简单的CSS3网页内容placeholder占位特效

mocka是一款简单的CSS3网页内容placeholder占位特效。它可以在网页加载的过程中，在显示内容的地方显示预定的CSS3动画，增强用户体验。

安装

可以通过npm来安装mocka.css文件。

npm install mocka-placeholder

使用方法

在页面中引入mocka.css文件。

HTML结构

在你需要添加内容占位的地方添加下面的HTML代码：

自定义样式

mocka使用sass来编写，你可以修改sass文件来自定义自己的CSS3动画效果。

$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

);