SVG-Powered component to easily create placeholder loadings (like Facebook's cards loading).
- ⚙️ Customizable: Feel free to change the colors, speed, sizes and even RTL;
- 👌 Plug and play: with many presets to use, see the examples;
- ✏️ DIY: use the create-content-loader to create your own custom loaders easily;
- ⚛️ Lightweight: only 1.4kB gzipped and 0 dependencies;
npm i react-content-loader --saveyarn add react-content-loaderCDN from JSDELIVR
There are two ways to use it:
1. Presets, see the examples:
import ContentLoader, { Facebook } from 'react-content-loader'
const MyLoader = () => <ContentLoader />
const MyFacebookLoader = () => <Facebook />2. Custom mode, see the online tool
const MyLoader = () => (
<ContentLoader>
{/* 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>
)Still not clear? Take a look at this working example at codesandbox.io
animate?: boolean
Defaults to true. Opt-out of animations with false
ariaLabel? string | boolean
Defaults to Loading interface.... It's used to describe what element it is. Use false to remove.
speed?: number
Defaults to 2. Animation speed in seconds.
className? string
Defaults to an empty string. The classname will be set in the <svg /> element.
width? number
Defaults to 400. It will be set in the viewbox attr in the <svg />.
height? number
Defaults to 130. It will be set in the viewbox attr in the <svg />.
rtl? boolean
Defaults to false. Content right-to-left.
preserveAspectRatio?: string
Defaults to xMidYMid meet. Aspect ratio option of <svg/>. See the available options here.
primaryColor?: string
Defaults to #f3f3f3 which is used as background of animation.
secondaryColor?: string
Defaults to #ecebeb which is used as the placeholder/layer of animation.
primaryOpacity?: string
Defaults to 1. Background opacity (0 = transparent, 1 = opaque) used to solve a issue in Safari
secondaryOpacity?: string
Defaults to 1. Animation opacity (0 = transparent, 1 = opaque) used to solve a issue in Safari
style?: React.CSSProperties
Defaults to an empty object.
uniquekey?: string
Defaults to random unique id. Use the same value of prop key, that will solve inconsistency on the SSR, see more 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 />
For the custom mode, use the online tool.
const MyLoader = () => (
<ContentLoader
height={140}
speed={1}
primaryColor={'#333'}
secondaryColor={'#999'}
>
{/* 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>
)
- React Native;
- Preact;
- Vue.js: vue-content-loading, vue-content-loader;
- Angular.
Fork the repo then clone it
$ git clone [email protected]:YourUsername/react-content-loader.git && cd react-content-loader
$ yarn: Install the dependencies;
$ yarn build: Build to production;
$ yarn dev: Run the docz to see your changes;
$ yarn test: Run all tests: type checking and unit tests;
$ yarn test:watch: Watch unit tests;
$ yarn tsc: Typescript checking;
$ yarn tsc:watch: Typescript checking with watching;
When using rgba as a primaryColor or secondaryColor value, Safari does not respect the alpha channel, meaning that the color will be opaque. To prevent this, instead of using an rgba value for primaryColor/secondaryColor, use the rgb equivalent and move the alpha channel value to the primaryOpacity/secondaryOpacity props.
{/* Opaque color in Safari and iOS */}
<ContentLoader
primaryColor="rgba(0,0,0,0.06)"
secondaryColor="rgba(0,0,0,0.12)">{/_ Semi-transparent color in Safari and iOS _/}
<ContentLoader
primaryColor="rgb(0,0,0)"
secondaryColor="rgb(0,0,0)"
primaryOpacity={0.06}
secondaryOpacity={0.12}>
Using base tag on a page that contains SVG elements fails to render and it looks like a black box. Just remove the base-href tag from the <head /> and issue solved.
