如何在React中用react-spinners创建一个加载动画

简介

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

在本指南中，我们将学习如何通过利用react-spinners 库，在加载应用程序和从外部来源检索内容时显示加载器动画。

为此--我们将建立一个获取报价的小程序，在获取报价的同时显示加载画面。

创建一个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是许多spinners的集合，我们可以在我们的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} 来代替。

我们还可以通过使用override 属性来改变用于控制spinner-icon 的CSS。

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;

**注意：**我们可以在react-spinner 。 文档，在那里我们也可以看到一个可用的辛纳器的列表。

总结

在这个简短的指南中，我们已经看了如何使用react-spinners 来为React中的一个元素添加一个加载旋钮。