如何使用 React-spinners 在 React 中创建加载动画

由柏拉图重新发布

关注： 0

介绍

在创建从外部资源获取需要一些时间加载的内容的 React 应用程序时，通过吸引用户并通过加载程序保持他们的注意力来提供愉快的用户体验总是一个好主意，因为这有助于用户了解正在发生的事情，而不是而不是让他们去猜测。

在本指南中，我们将通过使用 react-spinners 图书馆。

为此——我们将构建一个获取报价的小型应用程序，在获取报价时会显示加载屏幕：

如果您想了解有关从头开始创建微调器的更多信息，请阅读我们的 “如何从零开始在 React 中创建加载动画”!

创建示例 React 应用程序

让我们从查看我们的 React 标记开始。基本上，我们有两个 <div> 中的元素亲 <div> （为了简单起见）——一个是 loader-container 第二是 main-content:

import React from 'react'; const App = () => { return ( <div className="container"> <div className="loader-container"> <div className="spinner"></div> </div> <div className="main-content"> <h1>Hello World!</h1> <p> This is a demo Project to show how to add animated loading with React. </p> <div className="buttons"> <button className="btn"> <a href="#">Read Article</a> </button> <button className="btn get-quote"> Generate Quote </button> </div> <div className="quote-section"> <blockquote className="quote"> If you do not express your own original ideas, if you do not listen to your own being, you will have betrayed yourself. </blockquote> - <span className="author">Rollo May</span> </div> </div> </div> );
}; export default App;

到目前为止，我们只创建了一个 <div> 对于我们的装载机。现在，让我们看看如何添加它并在某些内容加载时触发它。

请注意： 您可以检查出这个仓库并在阅读本指南时根据需要交叉检查代码。

在我们的应用程序中使用 React Spinners

react-spinner 是我们可以在 React 应用程序中使用的许多微调器的集合。要使用 React spinner，我们必须首先通过运行以下任何命令将库安装在项目目录中：

$ npm install --save react-spinners
// Or
$ yarn add react-spinners

一旦完成，我们现在可以导入我们想要使用的特定加载器（在这种情况下，一个 ClipLoader) 并设置一些样式，如大小和颜色：

import React, { useState, useEffect } from 'react';
import ClipLoader from 'react-spinners/ClipLoader'; const App = () => { const [loadingInProgress, setLoading] = useState(false); <!-- ... --> return ( <div className="container"> {loadingInProgress ? ( <div className="loader-container"> <ClipLoader color={'#fff'} size={150} /> </div> ) : ( <div className="main-content"> <h1>Hello World!</h1> <p> This is a demo Project to show how to add animated loading with React. </p> <div className="buttons"> <button className="btn"> <a href="#">Read Article</a> </button> <button className="btn get-quote" onClick={getRandomQuote}> Generate Quote </button> </div> <div className="quote-section"> <blockquote className="quote">{quote.content}</blockquote>-{' '} <span className="author">{quote.author}</span> </div> </div> )} </div> );
}; export default App;

react-spinner 库有很多有用的特性，例如，我们可以使用它来处理加载而不使用三元运算符：

<ClipLoader color={'#fff'} loading={loadingInProgress} size={150} />

而不是使用三元运算符根据值显示内容 loadingInProgress 变量，我们只是简单地使用了 loading={loadingInProgress} 代替。

我们还可以更改用于控制 spinner-icon 通过使用 override 属性：

import { useState } from "react";
import { css } from "@emotion/react";
import ClipLoader from "react-spinners/ClipLoader"; const override = css` display: block; margin: 0 auto; border-color: red;
`; function App() { let [loadingInProgress, setLoading] = useState(true); return ( <div className="container"> <ClipLoader color={'#fff'} loading={loadingInProgress} css={override} size={150} /> // ... </div> );
} export default App;