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 |