How to Create and Customize react-content-loader
First I start with a preset content loader in an app. To get started, we first need to install the package (npm):

npm i react-content-loader — save

or

yarn add react-content-loader

Then we import the content from react-content-loader:

import ContentLoader, { Instagram } from 'react-content-loader'; class Bookings extends React.Component { return requests ? (

<div>

//

//

</div> ):(

<>

<h3>Loading ...</h3> <Instagram /> </> )}

It will look like this:

Here are some of the preset examples you can use by importing them. You can see the shape here:

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



const MyFacebookLoader = () => <Facebook /> ------------------------------------- import { Instagram } from 'react-content-loader'



const MyInstagramLoader = () => <Instagram /> ------------------------------------- import { Code } from 'react-content-loader'



const MyCodeLoader = () => <Code /> -------------------------------------- import { List } from 'react-content-loader'



const MyListLoader = () => <List /> --------------------------------------- import { BulletList } from 'react-content-loader'



const MyBulletListLoader = () => <BulletList />

If you want to create your own loader based on your container style, you can easily use this online tool: Creator of React Content Loader. You just need to draw using the canvas or code using the live editing.

Creating a content loader is very easy using this SVG generator. You can simply design your loader based on the page and edit the size, background, and foreground. Also, you can add the radius to the border, add or remove shapes such as rectangle and circle, and select the speed of the animations.

It then simply generates the code for you, ready to copy and add as a component to import and use:

import React from "react"

import ContentLoader from "react-content-loader" const MyLoader = (props) => (

<ContentLoader

speed={10}

width={404}

height={75}

viewBox="0 0 404 75"

backgroundColor="#1766ab"

foregroundColor="#b9d2e4"

{...props}

>

<rect x="118" y="91" rx="0" ry="0" width="1" height="0" />

<rect x="4" y="-21" rx="0" ry="0" width="336" height="110" />

<circle cx="68" cy="199" r="28" />

<rect x="121" y="183" rx="0" ry="0" width="237" height="19" />

<rect x="123" y="216" rx="0" ry="0" width="235" height="18" />

<rect x="271" y="170" rx="0" ry="0" width="1" height="21" />

<rect x="219" y="35" rx="0" ry="0" width="4" height="32" />

</ContentLoader>

) export default MyLoader

You can use it on the page you want to show the content loader:

{image ? <img onClick={()=> setOpen(true)} className={classes.image} src={image} alt={title} /> : <MyLoader/>}

Pretty simple, right? Once you learn how to replace the content with card loading (also known as skeleton UI), you can set up an adaptable library of classes for replacing loader content and create the loader screens really quickly.

Thanks for reading!
['Sara Fotros']
['React', 'Front End Development', 'Programming', 'Components', 'Reactjs']