如何使用 react-spinners 在 React 中創建加載動畫

簡介

當創建從外部資源獲取內容的 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

免費電子書：Git Essentials

查看我們的 Git 學習實踐指南，其中包含最佳實踐、行業認可的標準以及隨附的備忘單。停止谷歌搜索 Git 命令並真正學習 它！

一旦完成，我們現在可以導入我們想要使用的特定加載器（在本例中，一個 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 的 CSS 通過使用 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;

注意： 我們可以閱讀更多關於 react-spinner 在文檔中 ，在這裡我們還可以看到可用的罪人列表。

結論

在這個簡短的指南中，我們了解瞭如何使用 react-spinners 為 React 中的元素添加加載微調器。