Materialize CSS একটি শক্তিশালী ফ্রন্ট-এন্ড ফ্রেমওয়ার্ক যা ইন্টারফেসে Preloader বা লোডিং অ্যানিমেশন যোগ করতে সহায়তা করে। Preloaders হল ছোট অ্যানিমেশন যা ওয়েবসাইটের কনটেন্ট লোড হওয়ার সময় ব্যবহারকারীদের জানায় যে কিছু লোড হচ্ছে। Materialize CSS দুটি প্রধান ধরনের Preloader প্রদান করে: Circular Preloader এবং Linear Preloader। এই প্রিলোডারগুলি সাইটের লোডিং সময়কে ইন্টারঅ্যাকটিভ এবং ইউজার-বান্ধব করে তোলে।
এখানে Circular এবং Linear Preloader তৈরি করার পদ্ধতি বিস্তারিতভাবে আলোচনা করা হলো।
Circular Preloader
Circular Preloader হল একটি গোলাকার অ্যানিমেশন যা ওয়েবসাইটের কনটেন্ট লোড হওয়ার সময় প্রদর্শিত হয়। এটি সাধারণত একটি ঘুরতে থাকা সার্কেল আকারে প্রদর্শিত হয় এবং ব্যবহারকারীদের জানায় যে সাইটের কনটেন্ট এখনও লোড হচ্ছে।
১. Circular Preloader তৈরি করা
<div class="preloader-wrapper active">
<div class="spinner-layer spinner-blue-only">
<div class="circle-clipper left">
<div class="circle"></div>
</div>
<div class="gap-patch">
<div class="circle"></div>
</div>
<div class="circle-clipper right">
<div class="circle"></div>
</div>
</div>
</div>
এখানে:
- preloader-wrapper active: এই ক্লাসগুলি প্রিলোডারটির কনটেইনার এবং স্টাইলিং সেট করে।
- spinner-layer: এটি ঘূর্ণনকারী অ্যানিমেশন তৈরি করে।
- circle-clipper: প্রতিটি অংশের জন্য একটি সেমি-সার্কুলার ক্লিপ তৈরি করে।
- spinner-blue-only: এটি প্রিলোডারের রঙ নির্ধারণ করে (এখানে নীল রঙ ব্যবহার করা হয়েছে, তবে আপনি এটি পরিবর্তন করতে পারেন)।
২. Circular Preloader কাস্টমাইজ করা
আপনি প্রিলোডারের রঙ এবং আকার পরিবর্তন করতে চাইলে CSS কাস্টমাইজেশন ব্যবহার করতে পারেন। উদাহরণস্বরূপ:
.spinner-blue-only .circle {
border-color: red; /* সাদা রঙের প্রিলোডারকে রেড করা হলো */
}
এখানে:
- border-color: প্রিলোডারের সার্কেলটির রঙ পরিবর্তন করতে ব্যবহৃত হয়।
Linear Preloader
Linear Preloader হল একটি রৈখিক (লাইন আকারে) প্রিলোডার যা সাধারণত একটি লাইন বা বার আকারে প্রদর্শিত হয়। এটি ওয়েবসাইটের কনটেন্ট লোড হওয়ার সময় লোডিং বার হিসেবে কাজ করে এবং ব্যবহারকারীকে সাইটের লোডিং প্রগ্রেস দেখায়।
১. Linear Preloader তৈরি করা
<div class="progress">
<div class="indeterminate"></div>
</div>
এখানে:
- progress: এই ক্লাসটি প্রগ্রেস বারটির কনটেইনার তৈরি করে।
- indeterminate: এটি অ্যানিমেশন তৈরি করে, যা প্রগ্রেস বারকে ধীরে ধীরে লোড হতে দেখায়, এটি ইন্ডিটারমিনেট প্রগ্রেস (অবস্থা অনুসরণে) প্রদর্শন করে।
২. Linear Preloader কাস্টমাইজ করা
আপনি Linear Preloader এর আকার, রঙ এবং স্টাইল কাস্টমাইজ করতে পারেন।
.progress {
height: 10px;
}
.indeterminate {
background-color: #ff5722; /* লাল রঙ */
}
এখানে:
- height: প্রগ্রেস বারের উচ্চতা কাস্টমাইজ করা।
- background-color: প্রগ্রেস বারের রঙ কাস্টমাইজ করা।
Circular এবং Linear Preloader এর মধ্যে পার্থক্য
- Circular Preloader:
- এটি একটি ঘূর্ণনকারী সার্কেল বা রিং আকারে প্রদর্শিত হয়।
- সাধারণত এটি অপেক্ষার সময় অ্যানিমেশন হিসেবে ব্যবহৃত হয়।
- Circular Preloader ব্যবহারকারীর জন্য একটি হালকা এবং প্রাকৃতিক অভিজ্ঞতা তৈরি করে।
- Linear Preloader:
- এটি একটি লাইন বা প্রগ্রেস বার আকারে প্রদর্শিত হয়।
- Linear Preloader ওয়েবসাইটের লোডিং প্রগ্রেসের প্রগতি দেখানোর জন্য ব্যবহৃত হয়।
- এটি ব্যবহারকারীকে স্পষ্টভাবে জানায় যে কতটা কনটেন্ট লোড হয়েছে।
উপসংহার
Circular এবং Linear Preloaders হল অত্যন্ত কার্যকরী উপাদান, যা Materialize CSS এর মাধ্যমে ওয়েবসাইটের লোডিং সময়কে কার্যকর এবং ব্যবহারকারী-বান্ধব করে তোলে। Circular Preloader একটি ঘূর্ণমান সার্কেল আকারে লোডিং প্রক্রিয়া দেখায়, এবং Linear Preloader একটি প্রগ্রেস বার আকারে লোডিং প্রগ্রেস দেখায়। আপনি যদি ওয়েবসাইটে লোডিং প্রক্রিয়া যুক্ত করতে চান, তবে এই প্রিলোডারগুলি খুবই উপকারী হবে।
Read more
