简介

加载器几乎是每个应用程序的一部分。每当您从 API 加载一些数据时,您需要显示加载消息或加载图标以通知用户数据正在加载。

在本文中,您将像内容加载器一样显示可自定义的Facebook、Instagram或Grid。

先决条件

要完成本教程,您需要:

• 有效的 Git 安装。

• Node.js 安装在本地。

本教程已使用 Node v13.14.0、npm v6.14.4、react v16.13.1 和 react-content-loader v.5.1.0 进行了验证

第 1 步 - 安装并运行 react 应用程序

首先,通过从终端执行以下命令克隆这个 GitHub 存储库

git clone https://github.com/myogeshchavan97/react-content-loader-demo.git

进入全屏模式 退出全屏模式

starter 代码存在于starter-code分支中,完整的源代码存在于 master 分支中,因此通过从终端执行以下命令切换到starter-code分支

git checkout starter-code

进入全屏模式 退出全屏模式

安装 5.1.0 版本的依赖项和react-content-loader包并启动 React 应用程序

npm install
npm install react-content-loader@5.1.0
npm run start

进入全屏模式 退出全屏模式

第 2 步 - 将内容加载器集成到应用程序中

现在,在src文件夹中创建一个新的components文件夹,并在其中添加一个新文件FacebookLoader.js,其中包含以下内容

import React from 'react';
import { Facebook } from 'react-content-loader';
const FacebookLoader = () => {
  return (
    <div>
      <h2>Facebook Loader</h2>
      <Facebook />
    </div>
  );
};
export default FacebookLoader;

进入全屏模式 退出全屏模式

在这里,您从react-content-loader包中添加了默认的Facebook加载程序组件。

现在,打开src/App.js,让我们使用上面的FacebookLoader组件

import React from 'react';
import FacebookLoader from './components/FacebookLoader';
import './App.css';
function App() {
  return (
    <div className="App">
      <FacebookLoader />
    </div>
  );
}
export default App;

进入全屏模式 退出全屏模式

这将生成像这样的加载器:

[](https://res.cloudinary.com/practicaldev/image/fetch/s--tQogVjXV--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_880/https://gist.github。 com/myogeshchavan97/e0be7fc4c838544e2d00afeb3a82ae10/raw/e7a204dfb40e2f73326b84498eb7748cf2a4f833/facebook_loader.gif)

第 3 步 — 自定义加载器

现在,在components文件夹中创建一个新文件InstagramLoader.js,内容如下

import React from 'react';
import { Instagram } from 'react-content-loader';
const InstagramLoader = () => {
  return (
    <div>
      <h2>Instagram Loader</h2>
      <Instagram width={500} height={500} backgroundColor="#cebaba" speed={3} />
    </div>
  );
};
export default InstagramLoader;

进入全屏模式 退出全屏模式

在这里,您提供了额外的道具来自定义加载器

• 宽度和高度道具,以像素(px)指定加载器宽度和高度

• backgroundColor 指定加载器的背景

• speed 以秒为单位指定动画速度

现在,打开src/App.js,让我们使用上面的InstagramLoader组件

import React from 'react';
import FacebookLoader from './components/FacebookLoader';
import InstagramLoader from './components/InstagramLoader';
import './App.css';
function App() {
  return (
    <div className="App">
      <InstagramLoader />
      <FacebookLoader />
    </div>
  );
}
export default App;

进入全屏模式 退出全屏模式

现在,您将看到这样的自定义 Instagram 加载程序:

[](https://res.cloudinary.com/practicaldev/image/fetch/s--7OvLznoD--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_880/https://gist.github. com/myogeshchavan97/e0be7fc4c838544e2d00afeb3a82ae10/raw/e7a204dfb40e2f73326b84498eb7748cf2a4f833/instagram_loader.gif)

第 4 步 — 使用自定义 SVG 代码自定义加载程序

react-content-loader网站还提供了一个 UI 工具,您可以在其中通过指定加载器的背景图像或方向以及其他属性来创建我们自己的自定义加载器。您可以在这里查看

该网站还提供了您可以使用的不同加载器的库。

例如,要使用 Grid Layout Loader,请在components文件夹中创建一个新文件GridLayoutLoader.js,其内容如下

现在,打开src/App.js并使用上面的GridLayoutLoader组件

import React from 'react';
import InstagramLoader from './components/InstagramLoader';
import GridLayoutLoader from './components/GridLayoutLoader';
import FacebookLoader from './components/FacebookLoader';
import './App.css';
function App() {
  return (
    <div className="App">
      <GridLayoutLoader />
      <InstagramLoader />
      <FacebookLoader />
    </div>
  );
}
export default App;

进入全屏模式 退出全屏模式

[](https://res.cloudinary.com/practicaldev/image/fetch/s--YBubXdA9--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_880/https://gist.github. com/myogeshchavan97/e0be7fc4c838544e2d00afeb3a82ae10/raw/e7a204dfb40e2f73326b84498eb7748cf2a4f833/grid_layout.gif)

您可以在此处查看所有可用的装载机库

结论

如您所见,内容加载器使用自定义动画内容确实使应用程序看起来不错。

本文的完整源代码请查看 GitHub 上的react-content-loader-demo仓库。也可以看这个应用的现场演示

不要忘记订阅我的每周时事通讯,其中包含惊人的提示、技巧和文章直接在您的收件箱这里。