Github url

react-content-loader

by danilowoz

‚ö™ SVG-Powered component to easily create skeleton loadings.

9.3K Stars 329 Forks Last release: 22 days ago (v5.1.0) MIT License 214 Commits 33 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:

react-content-loader

Example's react-content-loader

SVG-Powered component to easily create placeholder loadings (like Facebook's cards loading).

Features

  • :gear: Customizable: Feel free to change the colors, speed, sizes and even RTL;
  • :ok_hand: Plug and play: with many presets to use, see the examples;
  • :pencil2: DIY: use the create-content-loader to create your own custom loaders easily;
  • ūüďĪ React Native support: same API, as same powerful features;
  • ‚öõÔłŹ Really lightweight: less than 2kB and 0 dependencies for web version;

Index

Getting Started

npm i react-content-loader --save
yarn add react-content-loader

For React Native

npm i react-content-loader react-native-svg --save
yarn add react-content-loader react-native-svg

CDN from JSDELIVR

Usage

There are two ways to use it:

1. Presets, see the examples:

import ContentLoader, { Facebook } from 'react-content-loader' const MyLoader = () =\> <contentloader></contentloader>const MyFacebookLoader = () =\> <facebook></facebook>

2. Custom mode, see the online tool

const MyLoader = () =\> ( <contentloader viewbox="0 0 380 70">
    {/* Only SVG shapes */}    
    <rect x="0" y="0" rx="5" ry="5" width="70" height="70"></rect>
    <rect x="80" y="17" rx="4" ry="4" width="300" height="13"></rect>
    <rect x="80" y="40" rx="3" ry="3" width="250" height="10"></rect>
  </contentloader>)

Still not clear? Take a look at this working example at codesandbox.io
Or try the components editable demo hands-on and install it from bit.dev

Native

react-content-loader

can be used with React Native in the same way as web version with the same import:

1. Presets, see the examples:

import ContentLoader, { Facebook } from 'react-content-loader/native' const MyLoader = () =\> <contentloader></contentloader>const MyFacebookLoader = () =\> <facebook></facebook>

2. Custom mode

To create custom loaders there is an important difference: as React Native doesn't have any native module for SVG components, it's necessary to import the shapes from react-native-svg or use the named export Rect and Circle from

react-content-loader

import:

import ContentLoader, { Rect, Circle } from 'react-content-loader/native' const MyLoader = () =\> ( <contentloader viewbox="0 0 380 70">
    <circle cx="30" cy="30" r="30"></circle>
    <rect x="80" y="17" rx="4" ry="4" width="300" height="13"></rect>
    <rect x="80" y="40" rx="3" ry="3" width="250" height="10"></rect>
  </contentloader>)

Options

**``` animate?: boolean


Defaults&nbsp;to&nbsp;

true

.&nbsp;Opt-out&nbsp;of&nbsp;animations&nbsp;with&nbsp;

false


#### 
**```
title?: string
```** - _Web only_

Defaults&nbsp;to&nbsp;

Loading interface...

.&nbsp;It's&nbsp;used&nbsp;to&nbsp;describe&nbsp;what&nbsp;element&nbsp;it&nbsp;is.&nbsp;Use&nbsp;''(empty string)&nbsp;to&nbsp;remove.
#### 
**```
baseUrl?: string
```** - _Web only_

Required&nbsp;if&nbsp;you're&nbsp;using&nbsp;
``` document  ```
.&nbsp; Defaults&nbsp;to&nbsp;an&nbsp;empty&nbsp;string.&nbsp;This&nbsp;prop&nbsp;is&nbsp;common&nbsp;used&nbsp;as:&nbsp;

&nbsp;which&nbsp;will&nbsp;fill&nbsp;the&nbsp;SVG&nbsp;attribute&nbsp;with&nbsp;the&nbsp;relative&nbsp;path.&nbsp;Related&nbsp;[#93](https://github.com/danilowoz/react-content-loader/issues/93).
#### 
**```
speed?: number
```**

Defaults&nbsp;to&nbsp;

1.2

.&nbsp;Animation&nbsp;speed&nbsp;in&nbsp;seconds.
#### 
**```
interval?: number
```** - _Web only_

Defaults&nbsp;to&nbsp;

0.25

.&nbsp;Interval&nbsp;of&nbsp;time&nbsp;between&nbsp;runs&nbsp;of&nbsp;the&nbsp;animation,&nbsp;as&nbsp;a&nbsp;fraction&nbsp;of&nbsp;the&nbsp;animation&nbsp;speed.
#### 
**```
viewBox?: string
```**

Use viewBox props to set a custom viewBox value, for more information about how to use it, read the article [How to Scale SVG](https://css-tricks.com/scale-svg/).

#### 
**```
gradientRatio?: number
```** - _Web only_

Defaults&nbsp;to&nbsp;

1.2

.&nbsp;Width&nbsp;of&nbsp;the&nbsp;animated&nbsp;gradient&nbsp;as&nbsp;a&nbsp;fraction&nbsp;of&nbsp;the&nbsp;view box&nbsp;width.
#### 
**```
rtl?: boolean
```**

Defaults&nbsp;to&nbsp;

false

.&nbsp;Content&nbsp;right-to-left.
#### 
**```
backgroundColor?: string
```**

Defaults&nbsp;to&nbsp;

#f5f6f7

&nbsp;which&nbsp;is&nbsp;used&nbsp;as&nbsp;background&nbsp;of&nbsp;animation.
#### 
**```
foregroundColor?: string
```**

Defaults&nbsp;to&nbsp;

#eee

&nbsp;which&nbsp;is&nbsp;used&nbsp;as&nbsp;the&nbsp;foreground&nbsp;of&nbsp;animation.
#### 
**```
backgroundOpacity?: number
```** - _Web only_

Defaults&nbsp;to&nbsp;

1

.&nbsp;Background&nbsp;opacity&nbsp;(0&nbsp;=&nbsp;transparent,&nbsp;1&nbsp;=&nbsp;opaque)&nbsp;used&nbsp;to&nbsp;solve&nbsp;an&nbsp;issue&nbsp;in&nbsp;[Safari](https://github.com/danilowoz/react-content-loader/blob/master/#safari--ios)
#### 
**```
foregroundOpacity?: number
```** - _Web only_

Defaults&nbsp;to&nbsp;

1

.&nbsp;Animation&nbsp;opacity&nbsp;(0&nbsp;=&nbsp;transparent,&nbsp;1&nbsp;=&nbsp;opaque)&nbsp;used&nbsp;to&nbsp;solve&nbsp;an&nbsp;issue&nbsp;in&nbsp;[Safari](https://github.com/danilowoz/react-content-loader/blob/master/#safari--ios)
#### 
**```
style?: React.CSSProperties
```**

Defaults&nbsp;to&nbsp;an&nbsp;empty&nbsp;object.

#### 
**```
uniqueKey?: string
```** - _Web only_

Defaults&nbsp;to&nbsp;random&nbsp;unique&nbsp;id.&nbsp;Use&nbsp;the&nbsp;same&nbsp;value&nbsp;of&nbsp;prop&nbsp;key,&nbsp;that&nbsp;will&nbsp;solve&nbsp;inconsistency&nbsp;on&nbsp;the&nbsp;SSR,&nbsp;see&nbsp;more&nbsp;[here](https://github.com/danilowoz/react-content-loader/issues/78).

See all options [live](https://danilowoz.com/react-content-loader/)

## Examples

##### Facebook&nbsp;Style

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


![Facebook Style](https://user-images.githubusercontent.com/4838076/73212460-328f7500-4146-11ea-99e7-e19cd4e07a51.png)

##### Instagram&nbsp;Style

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


![Instagram Style](https://user-images.githubusercontent.com/4838076/73212462-328f7500-4146-11ea-98dc-3a6aeafd4a26.png)

##### Code&nbsp;Style

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


![Code Style](https://user-images.githubusercontent.com/4838076/73212459-328f7500-4146-11ea-89b0-1b7bbae8047b.png)

##### List&nbsp;Style

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


![List Style](https://user-images.githubusercontent.com/4838076/73212463-33280b80-4146-11ea-9f93-95c2cbdef17b.png)

##### Bullet&nbsp;list&nbsp;Style

import { BulletList } from 'react-content-loader' const MyBulletListLoader = () =>


![Bullet list Style](https://user-images.githubusercontent.com/4838076/73212458-328f7500-4146-11ea-826f-576059c4644e.png)

### Custom&nbsp;Style

For&nbsp;the&nbsp;custom&nbsp;mode,&nbsp;use&nbsp;the[online&nbsp;tool](https://danilowoz.github.io/create-react-content-loader/).

const MyLoader = () => ( {/* Only SVG shapes */} )


![Custom](https://user-images.githubusercontent.com/4838076/36352947-b87019a8-149e-11e8-99ba-c71c2bcf8733.gif)

## Troubleshooting

#### Responsive - Mobile version

In order to avoid unexpected behavior, the package doesn't have opinioned settings. So if it needs to be responsive, have in mind that the output of package is a regular SVG, so it just needs the same attributes to become a regular SVG responsive, which means:

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


#### Server-side rendering (SSR) - Match snapshot

As the main component generates random values to match the id of the SVG element with background style, it can encounter unexpected errors and unmatching warning on render, once the random value of id will be generated twice, in case of SSR: server and client; or in case of snapshot test: on the first match and re-running the test.

To fix it, set the prop [

uniqueKey

](https://github.com/danilowoz/react-content-loader#uniquekey-string---web-only), then the id will not be random anymore:

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


#### **Alpha&nbsp;is&nbsp;not&nbsp;working:&nbsp;Safari&nbsp;/&nbsp;iOS**

When&nbsp;using&nbsp;

rgba

&nbsp;as&nbsp;a&nbsp;

backgroundColor

&nbsp;or&nbsp;

foregroundColor

&nbsp;value,&nbsp;[Safari&nbsp;does&nbsp;not&nbsp;respect&nbsp;the&nbsp;alpha&nbsp;channel](https://github.com/w3c/svgwg/issues/180),&nbsp;meaning&nbsp;that&nbsp;the&nbsp;color&nbsp;will&nbsp;be&nbsp;opaque.&nbsp;To&nbsp;prevent&nbsp;this,&nbsp;instead&nbsp;of&nbsp;using&nbsp;a&nbsp;

rgba

&nbsp;value&nbsp;for&nbsp;

backgroundColor

/

foregroundColor

,&nbsp;use&nbsp;the&nbsp;

rgb

&nbsp;equivalent&nbsp;and&nbsp;move&nbsp;the&nbsp;alpha&nbsp;channel&nbsp;value&nbsp;to&nbsp;the&nbsp;

backgroundOpacity

/

foregroundOpacity

&nbsp;props.

{/* Opaque color in Safari and iOS */}

{/_ Semi-transparent color in Safari and iOS _/}


#### **Black&nbsp;box&nbsp;in&nbsp;Safari&nbsp;/&nbsp;iOS&nbsp;(again)**

Using&nbsp;the base&nbsp;tag&nbsp;on&nbsp;a&nbsp;page&nbsp;that&nbsp;contains&nbsp;SVG&nbsp;elements&nbsp;fails&nbsp;to&nbsp;render&nbsp;and&nbsp;it&nbsp;looks&nbsp;like&nbsp;a&nbsp;black&nbsp;box.&nbsp;Just&nbsp;remove&nbsp;the&nbsp;**base-href**&nbsp;tag&nbsp;from&nbsp;the&nbsp;
&nbsp;and&nbsp;issue&nbsp;solved.

![black box](https://user-images.githubusercontent.com/11562881/39406054-2f308de6-4bce-11e8-91fb-bbb35e29fc10.png)

See:&nbsp;[#93](https://github.com/danilowoz/react-content-loader/issues/93)&nbsp;/&nbsp;[109](https://github.com/danilowoz/react-content-loader/issues/109)

#### Browser supports SVG-Animate

Old browser doesn't support animation in SVG ([compatibility list](https://caniuse.com/#search=SVGAnimateElement)), and if your project must support IE for examples, here's a couple of ways to make sure that browser supports SVG Animate:

- 

window.SVGAnimateElement

- 

document.implementation.hasFeature("http://www.w3.org/TR/SVG11/feature#SVG-Animation", "1.1")

- Or even use https://modernizr.com/

## Similar&nbsp;packages

- React&nbsp;Native:&nbsp;[rn-placeholder](https://github.com/mfrachet/rn-placeholder),&nbsp;[react-native-svg-animated-linear-gradient](https://github.com/virusvn/react-native-svg-animated-linear-gradient);
- [Preact](https://github.com/bonitasoft/preact-content-loader);
- Vue.js:&nbsp;[vue-content-loading](https://github.com/LucasLeandro1204/vue-content-loading),&nbsp;[vue-content-loader](https://github.com/egoist/vue-content-loader);
- Angular:&nbsp;[ngx-content-loading](https://github.com/Gbuomprisco/ngx-content-loading),&nbsp;[ngx-content-loader](https://github.com/NetanelBasal/ngx-content-loader).

* * *

## Development

Fork&nbsp;the&nbsp;repo&nbsp;then&nbsp;clone&nbsp;it

$ git clone [email protected]:YourUsername/react-content-loader.git && cd react-content-loader

$ npm i

:&nbsp;Install&nbsp;the&nbsp;dependencies;

$ npm run build

:&nbsp;Build&nbsp;to&nbsp;production;

$ npm run dev

:&nbsp;Run&nbsp;the&nbsp;docz&nbsp;to&nbsp;see&nbsp;your&nbsp;changes;

$ npm run test

:&nbsp;Run&nbsp;all&nbsp;tests:&nbsp;type&nbsp;checking,&nbsp;unit&nbsp;tests on web and native;

$ yarn test:watch

:&nbsp;Watch&nbsp;unit&nbsp;tests;

$ yarn tsc

:&nbsp;Typescript&nbsp;checking;

$ yarn tsc:watch

:&nbsp;Typescript&nbsp;checking&nbsp;with&nbsp;watching;
### Commit&nbsp;messages

Commit&nbsp;messages&nbsp;should&nbsp;follow&nbsp;the&nbsp;[commit&nbsp;message&nbsp;convention](https://conventionalcommits.org/)&nbsp;so,&nbsp;changelogs&nbsp;could&nbsp;be&nbsp;generated&nbsp;automatically&nbsp;by&nbsp;that.&nbsp;Commit&nbsp;messages&nbsp;are&nbsp;validated&nbsp;automatically&nbsp;upon&nbsp;commit.&nbsp;If&nbsp;you&nbsp;aren't&nbsp;familiar&nbsp;with&nbsp;the&nbsp;commit&nbsp;message&nbsp;convention,&nbsp;you&nbsp;can&nbsp;use&nbsp;yarn&nbsp;commit&nbsp;(or&nbsp;

npm run commit

``` ) instead of git commit, which provides an interactive CLI for generating proper commit messages.

License

MIT

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.