Materialize CSS ফ্রেমওয়ার্কে Preloader এবং Progress Bar ব্যবহার করা ওয়েবসাইট বা অ্যাপ্লিকেশনে ইউজারকে ক্রিয়া বা প্রক্রিয়া সম্পর্কে একটি ভিজ্যুয়াল ইন্ডিকেটর প্রদান করতে সহায়তা করে। এগুলো ইউজারের অভিজ্ঞতাকে আরও ইন্টারঅ্যাকটিভ এবং প্রফেশনাল করে তোলে, বিশেষত যখন কোনো কাজ বা প্রক্রিয়া সম্পন্ন হতে সময় লাগে। এখানে Preloader এবং Progress Bar তৈরি এবং কনফিগার করার পদ্ধতি বিস্তারিতভাবে আলোচনা করা হলো।
Preloader তৈরি করা
Preloader সাধারণত ওয়েবসাইট লোডিং বা অ্যাপ্লিকেশন লোডিংয়ের সময় একটি এনিমেটেড ইন্ডিকেটর হিসেবে কাজ করে, যা ব্যবহারকারীকে বুঝতে সহায়তা করে যে কিছু লোড হচ্ছে এবং তাকে অপেক্ষা করতে হবে।
Preloader উদাহরণ:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Preloader Example</title>
<!-- Materialize CSS Link -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet">
</head>
<body>
<!-- Preloader Structure -->
<div class="progress">
<div class="indeterminate"></div>
</div>
<!-- Materialize JS Link -->
<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>
</body>
</html>
কোড ব্যাখ্যা:
<div class="progress">: এটি Materialize এর প্রগ্রেস বারের মূল কন্টেইনার।<div class="indeterminate">: এটি preloader বা লোডিং এনিমেশনটি তৈরি করে। "Indeterminate" এর মানে হল যে লোডিং প্রক্রিয়ার অগ্রগতি একেবারে নির্দিষ্ট নয় এবং এটি একটি চলমান এনিমেশন হিসেবে কাজ করে।- Materialize CSS স্বয়ংক্রিয়ভাবে লোডিং এনিমেশন এবং প্রগ্রেস বার পরিচালনা করে।
এটি সাধারণত পেজ লোডিং বা কোনো দীর্ঘ-running প্রক্রিয়ার জন্য ব্যবহার করা হয়।
Progress Bar তৈরি করা
Progress Bar সাধারণত লোডিং বা কোনো প্রক্রিয়ার অগ্রগতি (progress) দেখানোর জন্য ব্যবহৃত হয়। এটি ব্যবহারকারীকে জানাতে সহায়তা করে যে, কোনো কাজ চলমান রয়েছে এবং কতটুকু সম্পন্ন হয়েছে।
Progress Bar উদাহরণ:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Progress Bar Example</title>
<!-- Materialize CSS Link -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet">
</head>
<body>
<!-- Progress Bar Structure -->
<div class="progress">
<div class="determinate" style="width: 70%"></div>
</div>
<!-- Materialize JS Link -->
<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>
</body>
</html>
কোড ব্যাখ্যা:
<div class="progress">: এটি প্রগ্রেস বারের কন্টেইনার।<div class="determinate" style="width: 70%">: এটি মূল প্রগ্রেস বারের ব্যাকগ্রাউন্ড এবং অগ্রগতির পরিমাণ প্রদর্শন করে। এখানে style="width: 70%" দ্বারা প্রগ্রেস বারটি ৭০% পূর্ণ হবে।
এটি সাধারনত কোন প্রক্রিয়া যেমন ফাইল আপলোড, ডেটা প্রসেসিং, বা পেজ লোডিং ইত্যাদির প্রগ্রেস প্রদর্শন করতে ব্যবহৃত হয়।
Preloader এবং Progress Bar এর মধ্যে পার্থক্য
- Preloader: এটি একটি চলমান এনিমেশন বা লোডিং ইন্ডিকেটর, যা ব্যবহারকারীকে জানায় যে কিছু কাজ চলমান রয়েছে এবং এটি একটি indeterminate এনিমেশন হিসেবে কাজ করে।
- Progress Bar: এটি প্রক্রিয়ার অগ্রগতি নির্দিষ্ট পরিমাণে (শতকরা হিসেবে) প্রদর্শন করে। এটি ব্যবহারকারীকে জানায় যে কতটুকু কাজ সম্পন্ন হয়েছে এবং কতটুকু বাকি আছে। এটি সাধারণত determinate বার হিসেবে কাজ করে।
উপসংহার
Preloader এবং Progress Bar হলো দুইটি গুরুত্বপূর্ণ UI উপাদান, যা ব্যবহারকারীদের জন্য কার্যকরী ইনডিকেটর হিসেবে কাজ করে। Materialize CSS-এ সহজে Preloader এবং Progress Bar তৈরি করা যায়, যা ওয়েবসাইট বা অ্যাপ্লিকেশনে লোডিং বা প্রক্রিয়ার অবস্থান সম্পর্কে স্পষ্ট ধারণা দেয়। এগুলোর মাধ্যমে আপনি ব্যবহারকারীর অভিজ্ঞতাকে আরো উন্নত এবং প্রফেশনাল করতে পারেন।
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 ব্যবহার করে আপনি এটি কন্ট্রোল করতে পারেন এবং পেজের লোডিং শেষে প্রিলোডারটি সরিয়ে মূল কনটেন্ট দেখাতে পারেন।
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 একটি প্রগ্রেস বার আকারে লোডিং প্রগ্রেস দেখায়। আপনি যদি ওয়েবসাইটে লোডিং প্রক্রিয়া যুক্ত করতে চান, তবে এই প্রিলোডারগুলি খুবই উপকারী হবে।
Materialize CSS-এ Progress Bar একটি গুরুত্বপূর্ণ ইউজার ইন্টারফেস উপাদান, যা ডেটা লোড বা কোনো প্রক্রিয়া চলমান থাকার সময় ব্যবহারকারীকে প্রক্রিয়ার অবস্থা দেখানোর জন্য ব্যবহৃত হয়। এটি খুব সহজেই Materialize ফ্রেমওয়ার্ক ব্যবহার করে তৈরি করা যায় এবং এটি indeterminate (অনির্ধারিত) এবং determinate (নির্ধারিত) দুই ধরনের প্রগ্রেস বার সাপোর্ট করে।
এখানে Materialize CSS ব্যবহার করে Progress Bar তৈরি করার পদ্ধতি বিস্তারিতভাবে আলোচনা করা হলো।
১. Determinate Progress Bar
Determinate Progress Bar এমন একটি প্রগ্রেস বার যেখানে আপনি প্রগ্রেসের পরিমাণ নির্ধারণ করতে পারেন। এটি ব্যবহারকারীর সামনে একটি নির্দিষ্ট পরিমাণ কাজের অগ্রগতি প্রদর্শন করে।
উদাহরণ:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Materialize Determinate Progress Bar</title>
<!-- Materialize CSS -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet">
</head>
<body>
<!-- Determinate Progress Bar -->
<div class="progress">
<div class="determinate" style="width: 70%"></div>
</div>
<!-- Materialize JS and jQuery -->
<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>
</body>
</html>
এখানে:
- progress: এটি প্রগ্রেস বারটির মূল কন্টেইনার।
- determinate: এটি প্রগ্রেস বারের নির্দিষ্ট অংশকে উপস্থাপন করে।
- style="width: 70%": এটি প্রগ্রেস বারের পূর্ণতার পরিমাণ নির্ধারণ করে, যেখানে 70% এর মানে হচ্ছে প্রগ্রেস বারের 70% পূর্ণ।
এটি একটি সাধারন determinate progress bar, যা একটি নির্দিষ্ট পরিমাণ প্রগ্রেস প্রদর্শন করে।
২. Indeterminate Progress Bar
Indeterminate Progress Bar এমন একটি প্রগ্রেস বার যেখানে আপনি কোনো নির্দিষ্ট পরিমাণ অগ্রগতি দেখতে পাবেন না, বরং এটি চলতে থাকবে যতক্ষণ না প্রক্রিয়া শেষ হয়। এটি সাধারণত তখন ব্যবহৃত হয় যখন প্রক্রিয়ার সময়সীমা অজানা থাকে।
উদাহরণ:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Materialize Indeterminate Progress Bar</title>
<!-- Materialize CSS -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet">
</head>
<body>
<!-- Indeterminate Progress Bar -->
<div class="progress">
<div class="indeterminate"></div>
</div>
<!-- Materialize JS and jQuery -->
<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>
</body>
</html>
এখানে:
- indeterminate: এটি ইন্ডিটারমিনেট প্রগ্রেস বারের জন্য ব্যবহৃত ক্লাস, যা বারটি চলমান অবস্থায় থাকে এবং কখনো পূর্ণ হয় না।
Indeterminate Progress Bar ব্যবহারকারীদের জানিয়ে দেয় যে কোনো কাজ চলছে, কিন্তু কাজটির পূর্ণতা সম্পর্কে কোনো ধারণা থাকে না।
৩. Progress Bar কাস্টমাইজেশন
Materialize CSS-এ আপনি Progress Bar এর বিভিন্ন বৈশিষ্ট্য কাস্টমাইজ করতে পারেন, যেমন রঙ, আকার, এবং স্টাইল।
৩.১ Progress Bar রঙ পরিবর্তন করা
Materialize CSS-এ আপনি বিভিন্ন রঙের প্রগ্রেস বার তৈরি করতে পারেন। উদাহরণস্বরূপ:
<div class="progress red">
<div class="determinate" style="width: 50%"></div>
</div>
এখানে red ক্লাসটি ব্যবহার করা হয়েছে, যাতে প্রগ্রেস বারটি লাল রঙে প্রদর্শিত হয়।
৩.২ Height বা উচ্চতা পরিবর্তন করা
আপনি প্রগ্রেস বারের উচ্চতা কাস্টমাইজ করতে CSS ব্যবহার করতে পারেন।
<div class="progress" style="height: 20px;">
<div class="determinate" style="width: 70%"></div>
</div>
এখানে style="height: 20px;" কোডটি প্রগ্রেস বারের উচ্চতা পরিবর্তন করতে ব্যবহৃত হয়েছে।
৪. Progress Bar ব্যবহার করার জন্য জাভাস্ক্রিপ্ট
যখন আপনি determinate progress bar ব্যবহার করেন, তখন আপনি জাভাস্ক্রিপ্টের মাধ্যমে প্রগ্রেস বারটির অগ্রগতি আপডেট করতে পারেন। উদাহরণস্বরূপ:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Materialize Progress Bar with JavaScript</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet">
</head>
<body>
<div class="progress">
<div id="progress-bar" class="determinate" style="width: 0%"></div>
</div>
<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>
<script>
let progress = 0;
let interval = setInterval(function() {
progress += 10;
$('#progress-bar').css('width', progress + '%');
if (progress >= 100) {
clearInterval(interval);
}
}, 1000);
</script>
</body>
</html>
এখানে:
- setInterval() ফাংশনটি প্রতি 1 সেকেন্ডে প্রগ্রেস বারটি 10% বাড়ায়।
- clearInterval() প্রগ্রেস 100% হয়ে গেলে ইন্টারভ্যাল বন্ধ করে দেয়।
উপসংহার
Materialize CSS-এ Progress Bar তৈরি করা অত্যন্ত সহজ এবং এটি ওয়েবসাইট বা অ্যাপে কাজের প্রক্রিয়া বা অগ্রগতি দেখানোর জন্য একটি গুরুত্বপূর্ণ উপাদান। আপনি determinate প্রগ্রেস বার ব্যবহার করে নির্দিষ্ট অগ্রগতি প্রদর্শন করতে পারেন এবং indeterminate প্রগ্রেস বার ব্যবহার করে চলমান প্রক্রিয়া সম্পর্কে জানান দিতে পারেন। Materialize CSS এর সিম্পল সিনট্যাক্স এবং কাস্টমাইজেশন অপশন ব্যবহার করে আপনি আপনার প্রগ্রেস বারকে আরও আকর্ষণীয় এবং কার্যকরী করতে পারেন।
Materialize CSS একটি শক্তিশালী ফ্রন্ট-এন্ড ফ্রেমওয়ার্ক যা সহজেই ইন্টারঅ্যাকটিভ ইউজার ইন্টারফেস উপাদান তৈরি করতে সহায়ক। এর মধ্যে একটি গুরুত্বপূর্ণ উপাদান হলো Progress Bar, যা ওয়েব অ্যাপ্লিকেশন বা ওয়েবসাইটে লোডিং প্রক্রিয়া বা কাজের অগ্রগতি দেখাতে ব্যবহৃত হয়। Materialize CSS এর মাধ্যমে আপনি দুটি ধরনের Progress Bar ব্যবহার করতে পারবেন: Determinate এবং Indeterminate।
এখানে Determinate এবং Indeterminate Progress Bar এর বিস্তারিত ব্যবহার এবং কনফিগারেশন তুলে ধরা হলো।
Determinate Progress Bar
Determinate Progress Bar হল এমন একটি প্রোগ্রেস বার যা নির্দিষ্ট পরিমাণ অগ্রগতি প্রদর্শন করে। এটি একটি নির্দিষ্ট পরিমাণ কাজ বা প্রক্রিয়ার অগ্রগতি নির্দেশ করে, যেমন ফাইল আপলোড বা ডাউনলোড করার প্রক্রিয়া। Determinate Progress Bar সাধারণত value এবং max অ্যাট্রিবিউট দিয়ে কনফিগার করা হয়, যাতে এটি নির্দিষ্ট পরিমাণ পূর্ণতা বা অগ্রগতি দেখাতে পারে।
Determinate Progress Bar উদাহরণ
<div class="progress">
<div class="determinate" style="width: 70%"></div>
</div>
এখানে:
- progress: এটি একটি কন্টেইনার যা পুরো প্রোগ্রেস বার ধারণ করে।
- determinate: এটি প্রোগ্রেস বারের প্রকৃত অংশ যা অগ্রগতি দেখায়।
- style="width: 70%": এটি প্রোগ্রেস বারের অগ্রগতি নির্ধারণ করে, এখানে ৭০% প্রদর্শিত হবে।
Determinate Progress Bar কনফিগারেশন
Materialize CSS-এ Determinate Progress Bar তৈরি করতে আপনি JavaScript ব্যবহার করে এটি ডাইনামিকভাবে কনফিগার করতে পারেন। উদাহরণস্বরূপ:
<div class="progress">
<div class="determinate" id="progressBar"></div>
</div>
<script>
var progressBar = document.getElementById('progressBar');
var progress = 0;
function updateProgress() {
if (progress <= 100) {
progressBar.style.width = progress + '%';
progress += 10;
}
}
setInterval(updateProgress, 1000); // প্রতি সেকেন্ডে অগ্রগতি আপডেট হবে
</script>
এখানে:
- updateProgress() ফাংশনটি প্রতি সেকেন্ডে প্রোগ্রেস বারের প্রস্থ (width) ১০% বৃদ্ধি করবে, এবং এটি ১০০% পৌঁছালে থেমে যাবে।
Indeterminate Progress Bar
Indeterminate Progress Bar হল এমন একটি প্রোগ্রেস বার যা কোন নির্দিষ্ট পরিমাণ অগ্রগতি দেখায় না। এটি একটি অস্থির অগ্রগতি দেখায়, যা সাধারণত একটি কাজ চলতে থাকার সময় ব্যবহৃত হয়, যেখানে কাজের সমাপ্তি নির্দিষ্ট নয়। এটি সাধারণত loading বা waiting স্ট্যাটাস দেখাতে ব্যবহৃত হয়।
Indeterminate Progress Bar উদাহরণ
<div class="progress">
<div class="indeterminate"></div>
</div>
এখানে:
- progress: এটি একটি কন্টেইনার যা পুরো প্রোগ্রেস বার ধারণ করে।
- indeterminate: এটি অস্থির অগ্রগতি দেখায়, এবং এটি স্বয়ংক্রিয়ভাবে চলতে থাকে।
Indeterminate Progress Bar কনফিগারেশন
Indeterminate Progress Bar কাস্টমাইজ করা সহজ। আপনি চাইলে এটি একটি loading স্ট্যাটাস বা waiting স্টেটের জন্য ব্যবহার করতে পারেন। এটি কোনও নির্দিষ্ট অগ্রগতি প্রদর্শন না করলেও, এটি ব্যবহারকারীর কাছে নির্দেশনা প্রদান করে যে কিছু কাজ হচ্ছে এবং এটি সম্পন্ন হতে কিছু সময় নিবে।
Determinate এবং Indeterminate Progress Bar এর মধ্যে পার্থক্য
- Determinate Progress Bar: এটি একটি নির্দিষ্ট পরিমাণ অগ্রগতি দেখায় এবং এর প্রগতি বা পূর্ণতা পরিমাণগতভাবে নির্ধারিত থাকে। যেমন, ফাইল আপলোডের ৫০%, ৭৫% বা ১০০%।
- Indeterminate Progress Bar: এটি কোনও নির্দিষ্ট অগ্রগতি দেখায় না এবং এটি সাধারণত loading বা waiting স্টেটের জন্য ব্যবহৃত হয়। এটি অবিরাম চলতে থাকে এবং শেষ না হওয়া পর্যন্ত চলতে থাকে।
উপসংহার
Materialize CSS এর Determinate এবং Indeterminate Progress Bar দুটি বিভিন্ন পরিস্থিতিতে ব্যবহৃত হয়। Determinate Progress Bar ব্যবহার করে আপনি ব্যবহারকারীদের একটি নির্দিষ্ট কাজের অগ্রগতি বা পূর্ণতা প্রদর্শন করতে পারেন, যেমন ফাইল আপলোড বা ডাউনলোড। অন্যদিকে, Indeterminate Progress Bar সাধারণত লোডিং বা অপেক্ষা করার জন্য ব্যবহৃত হয়, যেখানে অগ্রগতি কোনও নির্দিষ্ট পরিমাণে পরিমাপ করা যায় না। Materialize CSS এই দুটি প্রোগ্রেস বারকে সহজেই কনফিগার এবং কাস্টমাইজ করার সুযোগ প্রদান করে, যা আপনার ওয়েবসাইট বা অ্যাপ্লিকেশনের ইউজার অভিজ্ঞতাকে আরও উন্নত করে।
Read more
