yarism / react-loading-placeholder

Licence: other

Loading placeholer, inspired by Facebook

Programming Languages

javascript

184084 projects - #8 most used programming language

CSS

56736 projects

Projects that are alternatives of or similar to react-loading-placeholder

Vue Ui For Pc

基于Vue2.x的一套PC端UI组件，包括了Carousel 跑马灯、Cascader 级联、Checkbox 多选框、Collapse 折叠面板、DatePicker 日期选择、Dialog 对话框、Form 表单、Input 输入框、InputNumber 数字输入框、Layer 弹窗层、Loading 加载、Menu 菜单、Page 分页、Progress 进度条、Radio 单选框、SelectDropDown 仿select、Switch 开关、Table 表格、Tabs 标签页、Textarea 文本框、Tooltip 文字提示、BackTop 返回顶部、steps 步骤条、Transfer 穿梭框、Tree 树形、Upload 文件上传、Lazy 图片懒加载、Loading 加载、Pagination 分页等等

Stars: ✭ 156 (+817.65%)

Mutual labels: table, loading

Vue Content Loading

Vue component to easily build (or use presets) SVG loading cards Facebook like.

Stars: ✭ 729 (+4188.24%)

Mutual labels: placeholder, loading

koleton

The easiest library to show skeleton screens in an Android app.

Stars: ✭ 84 (+394.12%)

Mutual labels: placeholder, loading

jh-weapp-demo

微信小程序项目- 实现一些常用效果、封装通用组件和工具类

Stars: ✭ 60 (+252.94%)

Mutual labels: table, loading

Hgplaceholders

Nice library to show placeholders and Empty States for any UITableView/UICollectionView in your project

Stars: ✭ 2,048 (+11947.06%)

Mutual labels: placeholder, loading

Skeletonui

☠️ Elegant skeleton loading animation in SwiftUI and Combine

Stars: ✭ 275 (+1517.65%)

Mutual labels: placeholder, loading

React Native Blurhash

🖼️ A library to show colorful blurry placeholders while your content loads.

Stars: ✭ 430 (+2429.41%)

Mutual labels: placeholder, loading

Placeholder Loading

Simple and flexible, css only, content placeholder loading animation. https://zalog.github.io/placeholder-loading/

Stars: ✭ 1,137 (+6588.24%)

Mutual labels: placeholder, loading

React Content Loader

⚪ SVG-Powered component to easily create skeleton loadings.

Stars: ✭ 11,830 (+69488.24%)

Mutual labels: placeholder, loading

Skeletonview

☠️ An elegant way to show users that something is happening and also prepare them to which contents they are awaiting

Stars: ✭ 10,804 (+63452.94%)

Mutual labels: placeholder, loading

Vue Content Loader

SVG component to create placeholder loading, like Facebook cards loading.

Stars: ✭ 2,790 (+16311.76%)

Mutual labels: placeholder, loading

Statefulviewcontroller

Placeholder views based on content, loading, error or empty states

Stars: ✭ 2,139 (+12482.35%)

Mutual labels: placeholder, loading

Tabanimated

A skeleton screen framework based on native for iOS. (一个由iOS原生组件映射出骨架屏的框架，包含快速植入，低耦合，兼容复杂视图等特点，提供国内主流骨架屏动画的加载方案，同时支持上拉加载更多、自定制动画。)

Stars: ✭ 2,909 (+17011.76%)

Mutual labels: placeholder, loading

blur-up

A tool that creates preview images.

Stars: ✭ 28 (+64.71%)

Mutual labels: loading

template

Svelte starter template with HMR, code splitting, datatable & modular ui-kit

Stars: ✭ 16 (-5.88%)

Mutual labels: table

resource-loader

Getting files out of a JAR or loading a shared library is difficult. We made it easy.

Stars: ✭ 15 (-11.76%)

Mutual labels: loading

flutter easyloading

✨A clean and lightweight loading/toast widget for Flutter, easy to use without context, support iOS、Android and Web

Stars: ✭ 1,021 (+5905.88%)

Mutual labels: loading

medium-toc

Easily create a table of contents for your Medium articles in just one click. ✨

Stars: ✭ 33 (+94.12%)

Mutual labels: table

spinners-angular

Lightweight SVG/CSS spinners for Angular

Stars: ✭ 21 (+23.53%)

Mutual labels: loading

outfancy

Python3 library to print tables in Terminal.

Stars: ✭ 47 (+176.47%)

Mutual labels: table

View All Similar Projects ➔

react-loading-placeholder

Inspired by Facebook Content Placeholder and this article: https://cloudcannon.com/deconstructions/2014/11/15/facebook-content-placeholder-deconstruction.html. Can be used for both tables and lists.

Installation

npm install --save react-loading-placeholder

Including it:

import LoadingPlaceholder from 'react-loading-placeholder'

<LoadingPlaceholder numberOfRows={10}></LoadingPlaceholder>

Settings:

Set row height and space between:

<LoadingPlaceholder numberOfRows={10} heightOfRows={40} spaceBetween={10}></LoadingPlaceholder>

Table Layout:

<LoadingPlaceholder numberOfRows={10} tableLayout={true}></LoadingPlaceholder>

Set filter placeholder size:

<LoadingPlaceholder numberOfRows={10} tableLayout={true} filterOptions={{width: 300, height: 50}}></LoadingPlaceholder>

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].

Cheap and reliable Node.js hosting starts at $3/month, and $1/month static HTML hosting

yarism / react-loading-placeholder

Programming Languages

Labels

Projects that are alternatives of or similar to react-loading-placeholder

react-loading-placeholder

Installation

Including it:

Settings:

Set row height and space between:

Table Layout:

Set filter placeholder size: