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.
baseUrl? string
Required if you're using <base url="/" /> in your <head/>. Defaults to an empty string. This prop is common used as: <ContentLoader baseUrl={window.location.pathname} /> which will fill the SVG attribute with the relative path. Related #93.
speed?: number
Defaults to 2. Animation speed in seconds.
interval?: number
Defaults to 0.25. Interval of time between runs of the animation, as a fraction of the animation speed.
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 />.
gradientRatio? number
Defaults to 2. Width of the animated gradient as a fraction of the viewbox width.
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: ngx-content-loading, ngx-content-loader.
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;
Commit messages should follow the commit message convention so, changelogs could be generated automatically by that. Commit messages are validated automatically upon commit. If you aren't familiar with the commit message convention, you can use yarn commit (or npm run commit) instead of git commit, which provides an interactive CLI for generating proper commit messages.
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.
