Як створити анімацію завантаження в React за допомогою React-spinners

Перевидано Платоном

читають: 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;

Поки що ми створили лише a <div> для нашого навантажувача. Тепер давайте подивимося, як ми можемо додати його та активувати, коли деякий вміст завантажується.

Примітка: Ви можете перевірити це сховище і перевірте код, якщо потрібно, читаючи цей посібник.

Використання React Spinners у нашому додатку

react-spinner це набір багатьох спінерів, які ми можемо використовувати в наших програмах React. Щоб використовувати React spinner, ми повинні спочатку встановити бібліотеку в каталозі нашого проекту, виконавши будь-яку з наступних команд:

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

Як тільки це буде зроблено, ми можемо імпортувати конкретний завантажувач, який ми хочемо використовувати (у цьому випадку a 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} замість цього.

Ми також можемо змінити CSS, який використовується для керування 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;