The best way to create a placeholder layout effect
Install from npm:
$ npm install placeload.js
Documentation
Placeload.js is a library to customize your interface previews/skeleton screen that yield a fantastic user experience.
Getting started
/*
⊂_ヽ
＼＼ Λ＿Λ
＼('ㅅ') imported placeload.js & placeload.css
> ⌒ヽ
*/
var example01 = new Placeload('.example01__place');
example01.draw({
width: '250px',
height: '250px'
});
Margin top
/*
⊂_ヽ
＼＼ Λ＿Λ
＼('ㅅ') imported placeload.js & placeload.css
> ⌒ヽ
*/
var example02 = new Placeload('.example02__place');
example02.draw({
width: '150px',
height: '150px',
});
example02.draw({
width: '200px',
height: '20px',
marginTop: '20px'
});
example02.draw({
width: '300px',
height: '20px',
marginTop: '20px'
});
Center style
/*
⊂_ヽ
＼＼ Λ＿Λ
＼('ㅅ') imported placeload.js & placeload.css
> ⌒ヽ
*/
var example03 = new Placeload('.example03__place');
example03.draw({
width: '250px',
height: '250px',
center: true
});
example03.draw({
width: '300px',
height: '10px',
center: true,
marginTop: '10px'
});
Right style
/*
⊂_ヽ
＼＼ Λ＿Λ
＼('ㅅ') imported placeload.js & placeload.css
> ⌒ヽ
*/
var example04 = new Placeload('.example04__place');
example04.draw({
width: '150px',
height: '150px'
});
example04.draw({
width: '150px',
right: true,
marginLeft: '10px'
});
Right row
/*
⊂_ヽ
＼＼ Λ＿Λ
＼('ㅅ') imported placeload.js & placeload.css
> ⌒ヽ
*/
var example05 = new Placeload('.example05__place');
example05.draw({
width: '150px',
height: '150px'
});
example05.draw({
width: '150px',
height: '150px',
marginLeft: '10px',
right: true
});
example05.draw({
width: '150px',
height: '20px',
right: true
});
Border radius
/*
⊂_ヽ
＼＼ Λ＿Λ
＼('ㅅ') imported placeload.js & placeload.css
> ⌒ヽ
*/
var example06 = new Placeload('.example06__place', {borderRadius: '10px'});
example06.draw({
width: '100px',
height: '100px'
});
example06.draw({
width: '100px',
marginLeft: '10px',
right: true
});
example06.draw({
right: true,
height: '10px'
})