victorvoid / Placeload.js
Licence: mit
The best way to create a placeholder layout effect using pure js. 🐨 Like Facebook, Slack, Medium, etc.
Stars: ✭ 207
Programming Languages
javascript
184084 projects - #8 most used programming language
Labels
Projects that are alternatives of or similar to Placeload.js
Broccoli
📟An Android library that shows the placeholder of the view.
Stars: ✭ 1,390 (+571.5%)
Mutual labels: placeholder
Rn Placeholder
🏖️ Display some placeholder stuff before rendering your text or media content in React Native
Stars: ✭ 1,934 (+834.3%)
Mutual labels: placeholder
Vue Morphling
Vue filters and directives collection.
Stars: ✭ 179 (-13.53%)
Mutual labels: placeholder
Acfloatingtextfield
It is a subclass of UITextfield to Provide the floating label and customisations.
Stars: ✭ 110 (-46.86%)
Mutual labels: placeholder
Vue Content Placeholder
Facebook content placeholder using Vue.js component
Stars: ✭ 123 (-40.58%)
Mutual labels: placeholder
Hgplaceholders
Nice library to show placeholders and Empty States for any UITableView/UICollectionView in your project
Stars: ✭ 2,048 (+889.37%)
Mutual labels: placeholder
Uitextview Placeholder
A missing placeholder for UITextView
Stars: ✭ 1,317 (+536.23%)
Mutual labels: placeholder
Rskplaceholdertextview
A light-weight UITextView subclass that adds support for placeholder.
Stars: ✭ 192 (-7.25%)
Mutual labels: placeholder
React Content Loader
⚪ SVG-Powered component to easily create skeleton loadings.
Stars: ✭ 11,830 (+5614.98%)
Mutual labels: placeholder
React Native Loading Placeholder
React Native Loading Placeholder
Stars: ✭ 176 (-14.98%)
Mutual labels: placeholder
Skeletonview
☠️ An elegant way to show users that something is happening and also prepare them to which contents they are awaiting
Stars: ✭ 10,804 (+5119.32%)
Mutual labels: placeholder
Ng Image Appear
AngularJS Module to make images appear with transition as they load.
Stars: ✭ 120 (-42.03%)
Mutual labels: placeholder
Param.macro
Partial application syntax and lambda parameters for JavaScript, inspired by Scala's `_` & Kotlin's `it`
Stars: ✭ 170 (-17.87%)
Mutual labels: placeholder
Eleventy Plugin Lazyimages
Eleventy plugin that adds blurry placeholders & lazy loading to your images
Stars: ✭ 108 (-47.83%)
Mutual labels: placeholder
Statefulviewcontroller
Placeholder views based on content, loading, error or empty states
Stars: ✭ 2,139 (+933.33%)
Mutual labels: placeholder
Kaloader
Beautiful animated placeholders for showing loading of data
Stars: ✭ 99 (-52.17%)
Mutual labels: placeholder
Cminputview
💪之前代码是基于UITextView进行的封装,侵入性较强,不方便使用,现使用Category重构代码,支持Cocoapods
Stars: ✭ 149 (-28.02%)
Mutual labels: placeholder
Floatl
☁️ A pragmatic implementation of the Float Label Pattern for the web
Stars: ✭ 204 (-1.45%)
Mutual labels: placeholder
Ocskeleton
[OCSkeleton] - Make your loading view a little difference.
Stars: ✭ 184 (-11.11%)
Mutual labels: placeholder
React Loading Skeleton
Create skeleton screens that automatically adapt to your app!
Stars: ✭ 2,533 (+1123.67%)
Mutual labels: placeholder
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))
//running
userLoader.fold(
err => console.log('error: ', err),
allElements => console.log('allElements: ', allElements)
)
//Removing when data are loaded
API.getUsers()
.then(users => {
userLoader.remove()
})
Placeload 0.0.1 (OLD API) 🙈
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'
});
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.
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].