রিঅ্যাক্ট-স্পিনারের সাথে প্রতিক্রিয়ায় কীভাবে একটি লোডিং অ্যানিমেশন তৈরি করবেন

প্লেটো দ্বারা প্রকাশিত

অনুসরণকারী: 0

ভূমিকা

রিঅ্যাক্ট অ্যাপ্লিকেশন তৈরি করার সময় যা বাহ্যিক উত্স থেকে বিষয়বস্তু নিয়ে আসে যা লোড হতে কিছু সময় নেয়, ব্যবহারকারীদের আকৃষ্ট করে এবং একটি লোডারের সাথে তাদের মনোযোগ ধরে রাখার মাধ্যমে একটি আনন্দদায়ক ব্যবহারকারীর অভিজ্ঞতা প্রদান করা সর্বদা একটি ভাল ধারণা, কারণ এটি ব্যবহারকারীদের বুঝতে সাহায্য করে বরং কী ঘটছে। তাদের অনুমান করার চেয়ে।

এই নির্দেশিকাটিতে, আমরা শিখব কীভাবে একটি অ্যাপ্লিকেশন লোড করার সময় এবং বাহ্যিক উত্স থেকে বিষয়বস্তু পুনরুদ্ধার করার সময় লোডার অ্যানিমেশন প্রদর্শন করতে হয়, ব্যবহার করে react-spinners গ্রন্থাগার।

সেই লক্ষ্যে - আমরা একটি ছোট অ্যাপ্লিকেশন তৈরি করব যা উদ্ধৃতিগুলি নিয়ে আসে, একটি লোডিং স্ক্রীন সহ যখন একটি উদ্ধৃতি আনা হচ্ছে:

আপনি যদি স্ক্র্যাচ থেকে স্পিনার তৈরির বিষয়ে আরও জানতে চান, আমাদের পড়ুন "কীভাবে স্ক্র্যাচ থেকে প্রতিক্রিয়াতে একটি লোডিং অ্যানিমেশন তৈরি করবেন"!

একটি নমুনা প্রতিক্রিয়া অ্যাপ তৈরি করা হচ্ছে

আমাদের প্রতিক্রিয়া মার্কআপ দেখে শুরু করা যাক। মূলত, আমরা দুটি আছে <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 অনেক স্পিনারের একটি সংগ্রহ যা আমরা আমাদের প্রতিক্রিয়া অ্যাপ্লিকেশনগুলিতে ব্যবহার করতে পারি। রিঅ্যাক্ট স্পিনার ব্যবহার করার জন্য, আমাদের প্রথমে নিম্নলিখিত কমান্ডের যেকোন একটি চালিয়ে আমাদের প্রকল্পের ডিরেক্টরিতে লাইব্রেরি ইনস্টল করতে হবে:

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