Material Design Lite (MDL) এর Progress Bar কম্পোনেন্টটি ব্যবহারকারীদের একটি নির্দিষ্ট কাজের অগ্রগতি প্রদর্শন করতে ব্যবহৃত হয়। MDL-এ দুটি ধরনের প্রগ্রেস বার রয়েছে: Determinate Progress Bar এবং Indeterminate Progress Bar। Determinate Progress Bar এর মাধ্যমে নির্দিষ্ট কাজের প্রগ্রেস শতাংশ দেখানো হয়, যেখানে Indeterminate Progress Bar কোন নির্দিষ্ট সময়সীমা ছাড়াই অগ্রগতি দেখায়। এই টিউটোরিয়ালে, আমরা এই দুটি প্রগ্রেস বার তৈরি এবং কাস্টমাইজ করার পদ্ধতি আলোচনা করব।
Determinate 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>Determinate Progress Bar</title>
<!-- MDL CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/material-design-lite/1.3.0/material.min.css">
<!-- Google Material Icons -->
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<!-- Progress Bar -->
<div class="mdl-progress mdl-js-progress mdl-progress__indeterminate" id="progress-bar"></div>
<!-- MDL JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/material-design-lite/1.3.0/material.min.js"></script>
<script>
// Progress bar example with dynamic update
let progress = 0;
const progressBar = document.getElementById('progress-bar');
let interval = setInterval(function() {
if (progress >= 100) {
clearInterval(interval);
} else {
progress += 10;
progressBar.setAttribute('value', progress); // Update progress bar value
}
}, 1000);
</script>
</body>
</html>
ব্যাখ্যা:
- mdl-progress mdl-js-progress mdl-progress__indeterminate: এটি MDL এর প্রগ্রেস বার তৈরি করতে ব্যবহৃত ক্লাস। এটি একটি determinate প্রগ্রেস বার, যার মাধ্যমে প্রগ্রেসের মান সরাসরি অ্যাট্রিবিউট value দিয়ে নির্ধারণ করা হয়।
- value অ্যাট্রিবিউটটি প্রগ্রেস বারটির অগ্রগতির মান বা শতাংশ নির্ধারণ করে।
এখানে, setInterval() ফাংশন ব্যবহার করে প্রতি ১ সেকেন্ড পর পর প্রগ্রেস বারটির মান ১০ শতাংশ বৃদ্ধি করা হয়েছে, যা একটি বাস্তবসম্মত প্রগ্রেস বার তৈরি করে।
Indeterminate 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>Indeterminate Progress Bar</title>
<!-- MDL CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/material-design-lite/1.3.0/material.min.css">
<!-- Google Material Icons -->
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<!-- Indeterminate Progress Bar -->
<div class="mdl-progress mdl-js-progress mdl-progress__indeterminate"></div>
<!-- MDL JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/material-design-lite/1.3.0/material.min.js"></script>
</body>
</html>
ব্যাখ্যা:
- mdl-progress mdl-js-progress mdl-progress__indeterminate: এটি MDL এর indeterminate প্রগ্রেস বার তৈরি করতে ব্যবহৃত ক্লাস। এটি কোনো নির্দিষ্ট প্রগ্রেস দেখায় না এবং একটি চলন্ত অ্যানিমেশন প্রদর্শন করে, যা কাজ চলতে থাকলে চলতে থাকে।
- এটি mdl-progress__indeterminate ক্লাসের মাধ্যমে স্বয়ংক্রিয়ভাবে চলতে থাকে, ব্যবহারকারীদের জানাতে যে কোন কাজ চলমান রয়েছে।
এই ধরনের প্রগ্রেস বারটি বিশেষভাবে তখন ব্যবহৃত হয় যখন কাজের সমাপ্তি সময় অজ্ঞাত থাকে বা ব্যবহারকারীকে অপেক্ষা করতে বলা হয়।
Determinate এবং Indeterminate Progress Bar কাস্টমাইজেশন
MDL এর প্রগ্রেস বার কাস্টমাইজ করা খুবই সহজ। আপনি চাইলে প্রগ্রেস বারটির রঙ, আকার, এবং অন্যান্য বৈশিষ্ট্য পরিবর্তন করতে পারেন।
উদাহরণ: Determinate Progress Bar কাস্টমাইজেশন
.mdl-progress {
height: 20px;
background-color: #f0f0f0;
}
.mdl-progress__bar {
background-color: #4caf50; /* Green color for progress bar */
}
এটি determinate প্রগ্রেস বারটির আকার এবং রঙ পরিবর্তন করবে।
উদাহরণ: Indeterminate Progress Bar কাস্টমাইজেশন
.mdl-progress {
height: 20px;
background-color: #f0f0f0;
}
.mdl-progress__indeterminate {
background-color: #ff5722; /* Orange color for indeterminate progress bar */
}
এটি indeterminate প্রগ্রেস বারটির রঙ পরিবর্তন করবে।
সারাংশ
Material Design Lite (MDL) এর Determinate এবং Indeterminate Progress Bar খুবই কার্যকরী কম্পোনেন্ট যা আপনাকে ওয়েব পেজে প্রগ্রেস দেখানোর সুবিধা দেয়। Determinate Progress Bar ব্যবহারকারীদের নির্দিষ্ট প্রগ্রেস প্রদর্শন করতে সাহায্য করে, যখন Indeterminate Progress Bar কোনো নির্দিষ্ট অগ্রগতি না জানিয়ে শুধু চলমান অবস্থায় থাকে। MDL এর প্রগ্রেস বারটি কাস্টমাইজ করা সহজ এবং ব্যবহারকারী ইন্টারফেসে আকর্ষণীয় অ্যানিমেশন এবং ফাংশনালিটি প্রদান করে।
Read more
