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<link href="dist/placeload.min.css">
<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 userContainer = 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))
userContainer.fold(
(err) => console.log('error: ', err),
(allElements) => console.log('allElements: ', allElements)
)
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.