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. Chúng tôi sẽ sử dụng cả một spinner GIF và tạo một spinner từ đầu bằng CSS.
Để đạ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ề
react-spinners- một thư viện với các trình quay phim được xây dựng sẵn, hãy đọc “Cách tạo hoạt ảnh đang tải trong React với trình quay phản ứng”!
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ờ, chúng ta có thể khám phá các phương pháp khác nhau để lấy bộ tải, cũng như cách chúng ta có thể tạo kiểu cho nó xuất hiện trên một thành phần hoặc thậm chí làm cho nó xuất hiện trên toàn bộ màn hình.
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.
Tạo Hoạt ảnh cho Trình tải bằng React - GIF và CSS
Điều đầu tiên chúng ta phải làm trước khi triển khai hoạt ảnh của trình tải trong React là tạo chính hoạt ảnh đó. Có một số cách chúng ta có thể làm điều đó, nhưng, trong bài viết này, chúng ta sẽ xem xét hai trong số chúng - GIF hoạt ảnh và hoạt ảnh CSS.
Tạo hoạt ảnh cho trình tải bằng GIF
A GIF là hình ảnh động (có thể) tự lặp lại một cách vô hạn mà không tạm dừng. Nó có thể được thực hiện với bất kỳ GIF nhà sản xuất hoặc từ đầu với các công cụ thiết kế. Trong hướng dẫn này, chúng tôi sẽ sử dụng GIF này và làm cho nó xuất hiện dưới dạng nền của loader-container:
.loader-container {
width: 100%;
height: 100vh;
position: fixed;
background: rgba(0, 0, 0, 0.834)
url("https://media.giphy.com/media/8agqybiK5LW8qrG3vJ/giphy.gif") center
no-repeat;
z-index: 1;
}
Lưu ý: Bạn cũng có thể áp dụng cùng một GIF này cho các phần tử khác, để bản địa hóa phạm vi của hoạt ảnh.
Đoạn mã trên sẽ hỗ trợ chúng tôi tạo nền đen bao phủ toàn bộ màn hình trước khi đặt biểu tượng trình tải của chúng tôi ở trung tâm. Khi chúng tôi chạy ứng dụng của mình, loader-container bây giờ sẽ ở trên cùng bởi vì chúng tôi đặt z-index đến 1:
Tuyệt quá! Chúng tôi đã tạo một màn hình tải bằng cách sử dụng GIF hình ảnh như trình tải. Có vô số cách khác để chúng ta có thể tạo kiểu loader-container cho các hiệu ứng khác nhau. Bây giờ chúng ta hãy xem cách chúng ta có thể tạo trình tải này bằng CSS, tránh sử dụng các hình ảnh bên ngoài, điều này có thể gây gánh nặng về thời gian tải.
Tạo hoạt ảnh trình tải bằng CSS
CSS là một ngôn ngữ biểu đạt cho phép chúng ta thực hiện nhiều kiểu tạo kiểu khác nhau như vẽ hình dạng, mô tả thứ tự tương đối của các phần tử và đặc điểm của chúng, thêm hình ảnh và thậm chí tạo hoạt ảnh cho chúng dựa trên nhu cầu của chúng ta. Hãy làm một điều rất đơn giản bộ tải spinner.
Hãy nhớ rằng chúng ta đã có một con quay <div> bên trong thùng chứa trong của chúng tôi load-container đánh dấu? Mặc dù chúng tôi không sử dụng nó trước đó, chúng tôi sẽ sử dụng nó bây giờ để tạo kiểu cho biểu tượng và sau đó sử dụng load-container để căn giữa biểu tượng trình tải:
.loader-container {
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
position: fixed;
background: rgba(0, 0, 0, 0.834);
z-index: 1;
}
.spinner {
width: 64px;
height: 64px;
border: 8px solid;
border-color: #3d5af1 transparent #3d5af1 transparent;
border-radius: 50%;
animation: spin-anim 1.2s linear infinite;
}
@keyframes spin-anim {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
Với CSS - chúng ta có thể tinh chỉnh cách thực hiện hoạt ảnh. Ở đây, chúng tôi đã tạo lại GIF từ trước đó! Cho đến nay, chúng ta đã thảo luận về hai cách tiếp cận chính để tạo hoạt ảnh của trình tải. Bây giờ, chúng ta hãy xem cách chúng ta có thể đưa chúng vào hoạt động.
Cách tạo hoạt ảnh tải trong React
Hoạt ảnh tải trong React khác với cách nó được thực hiện trong JavaScript vì hiện tại chúng tôi sử dụng nhà nước và toán tử bậc ba để kiểm soát thời điểm bộ nạp xuất hiện và biến mất. Chúng tôi cũng sẽ sử dụng useEffect() móc để đảm bảo rằng trình tải xuất hiện trong một khoảng thời gian xác định trước khi ứng dụng của chúng tôi tải. Bước đầu tiên là nhập cả hai móc có liên quan, tiếp theo là tạo trạng thái tải của chúng tôi:
import React, { useState, useEffect } from 'react';
const App = () => {
const [loading, setLoading] = useState(false);
return (
<!-- ... -->
);
};
export default App;
Lưu ý: Trạng thái được đặt thành false theo mặc định trong mã trên và chúng tôi có thể thay đổi nó thành true bất cứ khi nào chúng ta muốn loader-container xuất hiện.
Để bắt đầu, hãy sử dụng setTimeout() để cho phép trình tải xuất hiện trong 2 giây khi trang đang được hiển thị. Thời gian chờ này mô phỏng một cuộc gọi API tốn kém, cần thời gian để trả về kết quả:
import React, { useState, useEffect } from 'react';
const App = () => {
const [loading, setLoading] = useState(false);
useEffect(() => {
setLoading(true);
setTimeout(() => {
setLoading(false);
}, 2000);
}, []);
return (
<div className="container">
</div>
);
};
export default App;
Điều này có nghĩa là bất cứ khi nào ứng dụng của chúng tôi hiển thị, loader-container sẽ được hiển thị trong 2 giây. Chúng ta có thể sử dụng toán tử bậc ba để kiểm soát loader-container và hiển thị hoạt ảnh trong khoảng thời gian chờ này:
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ó!
import React, { useState, useEffect } from 'react';
const App = () => {
const [loading, setLoading] = useState(false);
useEffect(() => {
setLoading(true);
setTimeout(() => {
setLoading(false);
}, 2000);
}, []);
return (
<div className="container">
{loading ? (
<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">{quote.content}</blockquote>-{' '}
<span className="author">{quote.author}</span>
</div>
</div>
)}
</div>
);
};
export default App;
Thời Gian loading được thiết lập để true, toán tử bậc ba trong mã trước đó sẽ hiển thị loader-container. Nếu không, nó sẽ hiển thị main-content.
Nếu bạn muốn đọc thêm về toán tử bậc ba - hãy đọc “Hướng dẫn về Toán tử bậc ba trong JavaScript”!
Triển khai hoạt ảnh đang tải khi yêu cầu nội dung từ API
Một tình huống khác mà mọi người sử dụng hoạt ảnh tải trong React là khi tải nội dung từ nguồn bên ngoài vì những dữ liệu này là bên ngoài và việc phân phối của nó bị ảnh hưởng bởi nhiều sự kiện bên ngoài, bên cạnh thời gian xử lý dự kiến.
Hãy yêu cầu một báo giá ngẫu nhiên từ API Báo giá Ngẫu nhiên và lưu trữ chúng ở trạng thái, sau đó chúng tôi sẽ hiển thị chúng trên màn hình. Bất cứ khi nào chúng tôi gửi một yêu cầu, loading trạng thái sẽ được đặt thành true. Sau khi nội dung được tìm nạp, chúng tôi sẽ đặt nó trở lại false, dừng hoạt ảnh:
import React, { useState, useEffect } from 'react';
const App = () => {
const [loading, setLoading] = useState(false);
const [quote, setQuote] = useState({});
const getRandomQuote = () => {
setLoading(true);
fetch('https://api.quotable.io/random')
.then((res) => res.json())
.then((data) => {
setLoading(false);
setQuote(data);
});
};
return (
<div className="container">
{loading ? (
<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" 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;
Chúng tôi đã tạo ra một spinner đáp ứng từ đầu! Ngoài ra, bạn có thể sử dụng react-spinner thư viện, trong đó có rất nhiều hình ảnh động của trình tải.
Nếu bạn muốn tìm hiểu thêm về
react-spinners- một thư viện với các trình quay phim được xây dựng sẵn, hãy đọc “Cách tạo hoạt ảnh đang tải trong React với trình quay phản ứng”!
Kết luận
Trong hướng dẫn này, chúng ta đã học cách thêm hoạt ảnh đang tải vào ứng dụng React của mình bằng hai cách tiếp cận khác nhau. Chúng tôi đã nhập một GIF đơn giản và tạo một spinner từ đầu bằng CSS. Cuối cùng, chúng tôi đã xem xét cách tích hợp hoạt ảnh trong một cài đặt thực tế hơn - tìm nạp dữ liệu từ API và hiển thị hiệu ứng trong khi chờ kết quả.
