The best way to create a placeholder layout effect.
Placeload.js is a library to customize your interface previews/skeleton screen that yield a fantastic user experience.
Compiled and production-ready code can be found in the dist directory. The lib directory contains development code.
Install placeload.js with npm:
$ npm install placeload.jsInstall placeload.js with bower:
$ bower install https://github.com/victorvoid/placeload.js.git<script src="dist/placeload.min.js"></script>import Placeload from 'placeload.js'
Placeload
.$('.user-placeload')
.config({speed: '2s'})
.line((element) => element.width(300).height(200))
.fold(
(err) => console.log('error: ', err),
(allElements) => console.log('allElements: ', allElements)
)import Placeload from 'placeload.js'
const userLoader = Placeload
.$('.user-placeload')
.config({speed: '2s'})
.line((element) => element.width(300).height(200))
.config({spaceBetween: '30px'})
.line((element) => element.width(400).height(20))
.config({spaceBetween: '30px'})
.line((element) => element.width(400).height(20))
.config({spaceBetween: '30px'})
.line((element) => element.width(250).height(20))
//running
userLoader.fold(
err => console.log('error: ', err),
allElements => console.log('allElements: ', allElements)
)
//Removing when data are loaded
API.getUsers()
.then(users => {
userLoader.remove()
})
Read the reference documentation for this version here
$ npm install [email protected] var placeUserUI = new Placeload('.user-placeload');
placeUserUI.draw({
width: '300px',
height: '200px'
});
placeUserUI.draw({
width: '400px',
height: '20px',
marginTop: '10px'
});
placeUserUI.draw({
width: '400px',
height: '20px',
marginTop: '10px'
});
placeUserUI.draw({
width: '250px',
height: '20px',
marginTop: '10px'
});The repo is written and maintained by Victor Igor. Other contributors that have submitted something, in alphabetical order:
- Raniel Oliveira - UX
The code is available under the MIT License.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent