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 এই দুটি প্রোগ্রেস বারকে সহজেই কনফিগার এবং কাস্টমাইজ করার সুযোগ প্রদান করে, যা আপনার ওয়েবসাইট বা অ্যাপ্লিকেশনের ইউজার অভিজ্ঞতাকে আরও উন্নত করে।
