react-skeleton-screen v0.0.6

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