نحوه ایجاد یک انیمیشن در حال بارگذاری در React With React-spinners

بازنشر افلاطون

دنبال: 0

معرفی

هنگام ایجاد برنامه‌های React که محتوا را از منابع خارجی واکشی می‌کنند و بارگیری آن مدتی طول می‌کشد، همیشه ایده خوبی است که با درگیر کردن کاربران و حفظ توجه آن‌ها با لودر، تجربه‌ای دلپذیر برای کاربر فراهم کنید، زیرا این به کاربران کمک می‌کند تا بفهمند چه اتفاقی می‌افتد. به جای اینکه آنها را به حدس و گمان رها کنیم.

در این راهنما، نحوه نمایش انیمیشن لودر هنگام بارگذاری برنامه و بازیابی محتوا از منابع خارجی را با استفاده از react-spinners کتابخانه

برای این منظور - ما یک برنامه کوچک می‌سازیم که مظنه‌ها را واکشی می‌کند، با صفحه بارگیری در حین واکشی یک مظنه:

اگر می‌خواهید درباره ایجاد اسپینرها از ابتدا اطلاعات بیشتری کسب کنید، ما را بخوانید نحوه ایجاد یک انیمیشن بارگیری در React از ابتدا!

ایجاد یک Sample React App

بیایید با نگاهی به نشانه گذاری 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 Spinner در برنامه ما

react-spinner مجموعه ای از اسپینرهای بسیاری است که می توانیم در برنامه های 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;

La 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;