使用react-content-loader生成列表加载占位组件

首先安装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中风格组件

• Facebook
• Instagram
• 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占位效果

Github上react-content-loader地址