المُقدّمة
عند إنشاء تطبيقات React التي تجلب المحتوى من مصادر خارجية تستغرق بعض الوقت للتحميل ، فمن الأفضل دائمًا توفير تجربة مستخدم ممتعة من خلال إشراك المستخدمين والحفاظ على انتباههم باستخدام أداة تحميل ، حيث يساعد ذلك المستخدمين على فهم ما يجري بدلاً من ذلك. من تركهم للتكهن.
في هذا الدليل ، سوف نتعلم كيفية عرض الرسوم المتحركة للمحمل عند تحميل تطبيق واسترداد المحتوى من مصادر خارجية ، من خلال استخدام
react-spinners
مكتبة.
تحقيقًا لهذه الغاية - سننشئ تطبيقًا صغيرًا يجلب علامات الاقتباس ، مع شاشة تحميل أثناء جلب عرض الأسعار:
إذا كنت ترغب في معرفة المزيد حول إنشاء دوّار من البداية ، فاقرأ "كيفية إنشاء رسوم متحركة للتحميل في React from Scratch"!
إنشاء نموذج تطبيق 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-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;
• 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;
ملحوظة: يمكننا قراءة المزيد عنها react-spinner
في ال توثيق، حيث يمكننا أن نرى قائمة بالخطأة المتاحين أيضًا.
وفي الختام
في هذا الدليل المختصر ، ألقينا نظرة على كيفية استخدامك react-spinners
لإضافة قرص تحميل إلى عنصر في React.
- a
- من نحن
- دائما
- التطبيق
- تطبيق
- التطبيقات
- اهتمام
- السيارات
- متاح
- في الأساس
- يجري
- حظر
- نساعدك في بناء
- الكود
- مجموعة شتاء XNUMX
- وعاء
- محتوى
- مراقبة
- خلق
- خلق
- خلق
- العرض
- عناصر
- مثال
- الخبره في مجال الغطس
- المميزات
- الاسم الأول
- متابعيك
- تبدأ من
- توليد
- الذهاب
- خير
- توجيه
- مقبض
- يساعد
- كيفية
- كيفية
- HTTPS
- اي كون
- فكرة
- الأفكار
- تثبيت
- IT
- حفظ
- تعلم
- المكتبة
- قائمة
- تحميل
- جار التحميل
- بحث
- أبحث
- الأكثر من ذلك
- عامل
- مشغلي
- الخاصة
- خاص
- تنفيذ المشاريع
- تزود
- رد فعل
- نادي القراءة
- تشغيل
- شاشة
- طقم
- قصير
- مقاس
- صغير
- بعض
- •
- الوقت
- فهم
- تستخدم
- المستخدمين
- استخدام
- قيمنا
- ابحث عن
- ما هي تفاصيل
- في حين
- بدون
- XML
- حل متجر العقارات الشامل الخاص بك في جورجيا