SVG-Powered component to easily create skeleton loadings. It’s also compatible with React Native

Create React Content Loader tool

Tool to easily create your animated skeleton-screen components, replacing usual loading and delivering better experiences for users, giving a wireframe of your pages like placeholders boxes for content and images.

https://skeletonreact.com/

Examples

Facebook style

import { Facebook } from 'react-content-loader'

const MyFacebookLoader = () => <Facebook />

Instagram style

import { Instagram } from 'react-content-loader'

const MyInstagramLoader = () => <Instagram />

Code style

import { Code } from 'react-content-loader'

const MyCodeLoader = () => <Code />

List style

import { List } from 'react-content-loader'

const MyListLoader = () => <List />

Bullet list style

import { BulletList } from 'react-content-loader'

const MyBulletListLoader = () => <BulletList />

Custom SVG Style

const MyLoader = () => (
  <ContentLoader
    height={140}
    speed={1}
    backgroundColor={'#333'}
    foregroundColor={'#999'}
    viewBox="0 0 380 70"
  >
    {/* Only SVG shapes */}
    <rect x="0" y="0" rx="5" ry="5" width="70" height="70" />
    <rect x="80" y="17" rx="4" ry="4" width="300" height="13" />
    <rect x="80" y="40" rx="3" ry="3" width="250" height="10" />
  </ContentLoader>
)