Logo Zephyrnet

Cách tạo hoạt ảnh đang tải trong React với phản ứng quay

Ngày:

Giới thiệu

Khi tạo các ứng dụng React tìm nạp nội dung từ các nguồn bên ngoài cần một chút thời gian để tải, bạn nên cung cấp trải nghiệm người dùng dễ chịu bằng cách thu hút người dùng và giữ sự chú ý của họ bằng trình tải, vì điều này giúp người dùng hiểu được điều gì đang xảy ra. hơn là để họ suy đoán.

Trong hướng dẫn này, chúng ta sẽ tìm hiểu cách hiển thị hoạt ảnh của trình tải khi tải ứng dụng và truy xuất nội dung từ các nguồn bên ngoài, bằng cách sử dụng react-spinners thư viện.

Để đạt được điều đó - chúng tôi sẽ xây dựng một ứng dụng nhỏ có chức năng tìm nạp các trích dẫn, với màn hình tải trong khi một trích dẫn đang được tìm nạp:

Nếu bạn muốn tìm hiểu thêm về cách tạo spinners từ đầu, hãy đọc “Cách tạo hoạt ảnh tải trong React từ Scratch”!

Tạo một ứng dụng React mẫu

Hãy bắt đầu bằng cách xem xét đánh dấu React của chúng tôi. Về cơ bản, chúng tôi có hai <div> các yếu tố trong cha mẹ <div> (vì đơn giản) - một là loader-container và thứ hai là 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;

Cho đến nay, chúng tôi chỉ tạo ra một <div> cho trình tải của chúng tôi. Bây giờ, hãy xem cách chúng ta có thể thêm và kích hoạt nó khi một số nội dung tải.

Lưu ý: Bạn có thể kiểm tra kho lưu trữ này và kiểm tra lại mã nếu cần trong khi đọc hướng dẫn này.

Sử dụng React Spinners trong ứng dụng của chúng tôi

react-spinner là một tập hợp nhiều spinner mà chúng ta có thể sử dụng trong các ứng dụng React của mình. Để sử dụng React spinner, trước tiên chúng ta phải cài đặt thư viện trong thư mục của dự án bằng cách chạy bất kỳ lệnh nào sau đây:

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

Xem hướng dẫn thực hành, thực tế của chúng tôi để học Git, với các phương pháp hay nhất, các tiêu chuẩn được ngành công nghiệp chấp nhận và bảng lừa đảo đi kèm. Dừng lệnh Googling Git và thực sự học nó!

Sau khi hoàn tất, bây giờ chúng tôi có thể nhập trình tải cụ thể mà chúng tôi muốn sử dụng (trong trường hợp này, ClipLoader) và đặt một số kiểu dáng như kích thước và màu sắc:

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;

Sản phẩm react-spinner thư viện có rất nhiều tính năng hữu ích, ví dụ, chúng ta có thể sử dụng nó để xử lý tải mà không cần sử dụng toán tử bậc ba:

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

Thay vì sử dụng toán tử bậc ba để hiển thị nội dung dựa trên giá trị của loadingInProgress biến, chúng tôi chỉ đơn giản là sử dụng loading={loadingInProgress} thay thế.

Chúng tôi cũng có thể thay đổi CSS được sử dụng để kiểm soát spinner-icon bằng cách sử dụng một override thuộc tính:

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;

Lưu ý: Chúng ta có thể đọc thêm về react-spinner trong tài liệu hướng dẫn, nơi chúng ta cũng có thể xem danh sách những tội nhân có sẵn.

Kết luận

Trong hướng dẫn ngắn này, chúng tôi đã xem xét cách bạn có thể sử dụng react-spinners để thêm một vòng quay tải vào một phần tử trong React.

tại chỗ_img

Tin tức mới nhất

tại chỗ_img