Materialize CSS একটি শক্তিশালী ফ্রন্ট-এন্ড ফ্রেমওয়ার্ক যা Google Material Design এর নীতির উপর ভিত্তি করে তৈরি। এটি preloader তৈরি করার জন্য একটি সহজ এবং কার্যকরী উপায় প্রদান করে, যা ওয়েবসাইটের লোডিং প্রক্রিয়াকে আরও ইউজার-ফ্রেন্ডলি এবং আকর্ষণীয় করে তোলে। Preloader সাধারণত একটি ওয়েব পেজ লোড হওয়ার সময় ইউজারকে একটি ইন্ডিকেটর বা লোডিং বার প্রদর্শন করে, যাতে তারা জানতে পারে যে পেজটি লোড হচ্ছে।
এখানে আমরা Materialize CSS-এ Preloader তৈরি এবং ব্যবস্থাপনার ধাপগুলো নিয়ে আলোচনা করব।
Preloader তৈরি করা
Materialize CSS-এ preloader তৈরি করা খুবই সহজ এবং এটি বিভিন্ন ধরনের লোডিং ইফেক্ট সহ আসে। আপনি spinner বা progress bar সহ বিভিন্ন ধরনের preloader তৈরি করতে পারেন।
১. Spinner Preloader
স্পিনার প্রিলোডার সাধারণত সার্কুলার আকারে ঘুরতে থাকে এবং পেজ লোড হওয়া না পর্যন্ত এটি ইউজারকে জানান দেয় যে কিছু প্রক্রিয়া চলছে।
উদাহরণ:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Materialize Preloader Example</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</head>
<body>
<!-- Preloader -->
<div class="progress">
<div class="indeterminate"></div>
</div>
<!-- Content that loads after preloader -->
<div id="content" style="display: none;">
<h1>Welcome to the page!</h1>
<p>This is the content of the page that loads after the preloader.</p>
</div>
<script>
$(document).ready(function() {
// Simulate a page load, hide preloader and show content after 3 seconds
setTimeout(function() {
$('.progress').hide(); // Hide the preloader
$('#content').show(); // Show the page content
}, 3000); // 3 seconds delay
});
</script>
</body>
</html>
এখানে:
- progress: এটি প্রগ্রেস বার তৈরি করে, যা পেজ লোড হওয়ার সময় ব্যবহৃত হয়।
- indeterminate: এটি একটি অ্যানিমেটেড স্টাইল, যা লোডিং প্রক্রিয়া ইন্ডিকেট করে।
- setTimeout(): 3 সেকেন্ড পর প্রিলোডারটি হাইড হয়ে যাবে এবং মূল কনটেন্ট দেখানো হবে।
২. Circular Spinner
Materialize CSS-এ circular spinner বা ঘূর্ণনশীল স্পিনার তৈরি করার জন্য preloader-wrapper এবং active ক্লাস ব্যবহার করা হয়।
উদাহরণ:
<div class="preloader-wrapper active">
<div class="spinner-layer spinner-blue">
<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: এটি প্রিলোডারটির মুল কনটেইনার।
- spinner-layer: এটি স্পিনারের বিভিন্ন অংশ তৈরি করে।
- circle-clipper left/right: এটি দুটি অংশের মধ্যে ঘূর্ণনশীল লাইন তৈরি করে।
৩. Progress Bar
অন্য একটি প্রিলোডার ফর্ম হলো progress bar, যা ওয়েব পেজের লোড হওয়ার প্রগ্রেস দেখায়। Materialize CSS এ progress bar সহজে তৈরি করা যায়।
উদাহরণ:
<div class="progress">
<div class="determinate" style="width: 50%"></div>
</div>
এখানে:
- determinate: এটি লোডিং প্রগ্রেস ইন্ডিকেট করে এবং এর স্টাইল দিয়ে প্রগ্রেস বার এর প্রশস্ততা নির্ধারণ করা হয়।
- width: 50%: এটি নির্ধারণ করে যে প্রগ্রেস বার কতটা পূর্ণ হবে (এখানে ৫০% পূর্ণ হয়েছে)।
Preloader ব্যবস্থাপনা
Materialize CSS-এ প্রিলোডার ব্যবস্থাপনা অনেক সহজ, কারণ আপনি JavaScript এর মাধ্যমে এটি কন্ট্রোল করতে পারেন। উদাহরণস্বরূপ, আপনি পেজের লোডিং সম্পূর্ণ হলে প্রিলোডারটি সরিয়ে মূল কনটেন্ট প্রদর্শন করতে পারেন।
১. Page Load Management:
$(document).ready(function() {
// Preloader hidden after content load
$(window).on('load', function() {
$('.preloader-wrapper').fadeOut(); // Hide preloader
$('body').css('overflow', 'auto'); // Enable page scrolling
});
});
এখানে:
- $(window).on('load'): যখন পুরো পেজ লোড হয়ে যাবে তখন এটি প্রিলোডারটি হাইড করে এবং মূল কনটেন্ট প্রদর্শন করবে।
- fadeOut(): এটি প্রিলোডারটি আস্তে আস্তে হাইড করে।
- overflow: এটি পেজ স্ক্রলিং ফেরত আনে যখন প্রিলোডারটি সরানো হয়।
২. Delay Timer for Preloader:
আপনি চাইলে প্রিলোডারের জন্য একটি নির্দিষ্ট টাইমার সেট করতে পারেন, যেমন ৫ সেকেন্ড পর প্রিলোডারটি স্বয়ংক্রিয়ভাবে চলে যাবে।
setTimeout(function() {
$('.preloader-wrapper').fadeOut(); // Hide preloader
}, 5000); // 5 seconds delay
এখানে:
- 5000: এটি ৫ সেকেন্ড দেরিতে প্রিলোডারটি সরিয়ে ফেলে।
উপসংহার
Materialize CSS এ Preloader তৈরি এবং ব্যবস্থাপনা করা খুবই সহজ। আপনি বিভিন্ন ধরনের প্রিলোডার ব্যবহার করতে পারেন যেমন spinner, progress bar, এবং circular spinner। এই প্রিলোডারগুলি ওয়েবসাইট বা অ্যাপের লোডিং প্রক্রিয়া ইউজারের কাছে আকর্ষণীয় এবং তথ্যপূর্ণ করে তোলে। Preloader ব্যবস্থাপনা করতে JavaScript ব্যবহার করে আপনি এটি কন্ট্রোল করতে পারেন এবং পেজের লোডিং শেষে প্রিলোডারটি সরিয়ে মূল কনটেন্ট দেখাতে পারেন।
Read more
