react-skeleton-screen

react-skeleton-screen is essentially a blank version of a page into which information is gradually loaded.

Skeleton screen	Loaded screen

Installation

Using yarn:

$ yarn add react-skeleton-screen

Then, use as you would anything else:

// using ES6 modules
import { Skeleton } from 'react-skeleton-screen'
 
// using CommonJS modules
var Skeleton = require('react-skeleton-screen').Skeleton

Usage

import React from 'react'
import { Skeleton } from 'react-skeleton-screen'
import 'react-skeleton-screen/build/skeleton.css'
// using scss
//import 'react-skeleton-screen/scss/Skeleton.scss'
 
const App = ({ isLoading }) => (
  isLoading
    ? <div>
        <Skeleton width="160px" height="30px" />
        <Skeleton width="70%" height="25px" marginLeft="30px" />
        <Skeleton width="60%" height="25px" marginLeft="30px" />
        <Skeleton width="110px" height="30px" />
        <Skeleton width="55%" height="25px" marginLeft="30px" />
        <Skeleton width="140px" height="30px" />
        <Skeleton width="55%" height="25px" marginLeft="30px" />
        <Skeleton width="65%" height="25px" marginLeft="30px" />
        <Skeleton width="90px" height="30px" />
        <Skeleton width="80%" height="25px" marginLeft="30px" />
        <Skeleton width="65%" height="25px" marginLeft="30px" />
      </div>
    : <div>Your app has been loaded!</div>
)
 
export default App

API

Prop	Type	Default	Description
width	string	100%	The width of the Skeleton. Eg: 100px or 20% or 10em
height	string	100%	The height of the Skeleton. Eg: 40px
marginTop	string	0	The margin-top of the Skeleton. Eg: 5px
marginRight	string	0	The margin-right of the Skeleton. Eg: 5px
marginBottom	string	0	The margin-bottom of the Skeleton. Eg: 10px
marginLeft	string	0	The margin-left of the Skeleton. Eg: 30px