placeload.js

The best way to create a placeholder layout effect.

What is it?

Placeload.js is a library to customize your interface previews/skeleton screen that yield a fantastic user experience.

Getting started

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

1. Include placeload on your site.

<script src="dist/placeload.min.js"></script>

2. Paint your placeholder

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)
  )

3. Placeload uses lazy evaluation, in that nothing is evaluated until necessary.

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))


userLoader.fold(
  (err) => console.log('error: ', err),
  (allElements) => console.log('allElements: ', allElements)
)

API.getUsers()
  .then(users => {
      userLoader.remove()
    }
  )

• Examples here

Authors

The repo is written and maintained by Victor Igor. Other contributors that have submitted something, in alphabetical order:

• Raniel Oliveira - UX

License

The code is available under the MIT License.