首先安装react-content-loader包
yarn add react-content-loader
使用加载占位组件
import ContentLoader, { Facebook } from 'react-content-loader'
const MyLoader = () => <ContentLoader />
const MyFacebookLoader = () => <Facebook />
react-content-loader提供了5中风格组件
- Code
- List
- Bullet
另外还可以自定义
import React, { Component } from 'react';
import ContentLoader, {Facebook, Code} from 'react-content-loader';
const MyLoader = () => (
<ContentLoader
height={90}
width={400}
speed={2}
primaryColor="#f3f3f3"
secondaryColor="#ecebeb"
>
<rect x="15" y="15" rx="5" ry="5" width="100" height="74" />
<rect x="135" y="25" rx="4" ry="4" width="250" height="8" />
<rect x="215" y="50" rx="3" ry="3" width="170" height="8" />
<rect x="135" y="75" rx="4" ry="4" width="250" height="8" />
</ContentLoader>
)
const MyFacebookLoader = () => <Facebook />
const MyCodeLoader = () => <Code />
自定义loader占位效果
