ری ایکٹ اسپنرز کے ساتھ رد عمل میں لوڈنگ اینیمیشن کیسے بنائیں

افلاطون کے ذریعہ دوبارہ شائع کیا گیا۔

فالونگ: 0

تعارف

React ایپلی کیشنز تخلیق کرتے وقت جو بیرونی ذرائع سے مواد حاصل کرتے ہیں جن کو لوڈ کرنے میں کچھ وقت لگتا ہے، صارفین کو مشغول کرکے اور ان کی توجہ لوڈر کے ساتھ رکھ کر صارف کا خوشگوار تجربہ فراہم کرنا ہمیشہ ایک اچھا خیال ہے، کیونکہ اس سے صارفین کو یہ سمجھنے میں مدد ملتی ہے کہ کیا ہو رہا ہے۔ ان کو قیاس آرائیوں پر چھوڑنے کے بجائے۔

اس گائیڈ میں، ہم سیکھیں گے کہ کسی ایپلیکیشن کو لوڈ کرتے وقت اور بیرونی ذرائع سے مواد کی بازیافت کرتے وقت لوڈر اینیمیشن کو کیسے ظاہر کیا جاتا ہے۔ react-spinners لائبریری.

اس مقصد کے لیے - ہم ایک چھوٹی ایپلی کیشن بنائیں گے جو اقتباسات کو لے کر آئے گی، جس میں لوڈنگ اسکرین کے ساتھ اقتباس حاصل کیا جا رہا ہے:

اگر آپ شروع سے اسپنرز بنانے کے بارے میں مزید جاننا چاہتے ہیں تو ہمارا پڑھیں "شروع سے رد عمل میں لوڈنگ اینیمیشن کیسے بنائیں"!

ایک نمونہ رد عمل ایپ بنانا

آئیے اپنے 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 اسپنر استعمال کرنے کے لیے، ہمیں پہلے درج ذیل کمانڈ میں سے کسی کو چلا کر اپنے پروجیکٹ کی ڈائرکٹری میں لائبریری کو انسٹال کرنا ہوگا۔

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

نوٹ: ہم کے بارے میں مزید پڑھ سکتے ہیں۔ react-spinner میں دستاویزات، جہاں ہم دستیاب گنہگاروں کی فہرست بھی دیکھ سکتے ہیں۔

نتیجہ

اس مختصر گائیڈ میں، ہم نے اس پر ایک نظر ڈالی ہے کہ آپ کس طرح استعمال کر سکتے ہیں۔ react-spinners React میں ایک عنصر میں لوڈنگ اسپنر شامل کرنے کے لیے۔

ٹائم اسٹیمپ: جون 7، 2022