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.js
Install 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 placeload.js@0.0.1
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.