Material Design Lite (MDL) একটি আধুনিক ফ্রন্ট-এন্ড ফ্রেমওয়ার্ক যা গুগলের Material Design নীতির উপর ভিত্তি করে তৈরি। MDL এর Progress Bar Component ব্যবহার করে আপনি আপনার ওয়েব পেজে লোডিং, প্রক্রিয়া বা কাজের অগ্রগতি দেখাতে পারেন। এটি ব্যবহারকারীদের জন্য একটি দৃষ্টিগ্রাহ্য এবং ইন্টারঅ্যাকটিভ উপায়, যা তারা তাদের অনুরোধ বা কার্য সম্পন্ন হওয়া পর্যন্ত সময় সম্পর্কে ধারণা পায়। MDL-এ প্রগ্রেস বার দুটি মূল ধরনের হয়ে থাকে: Indeterminate Progress Bar এবং Determinate Progress Bar।
MDL এর Progress Bar Component
MDL-এ দুটি প্রধান প্রকারের Progress Bar রয়েছে:
১. Indeterminate Progress Bar
এটি একটি অজানা (indeterminate) অগ্রগতি সিস্টেম, যেখানে প্রক্রিয়ার অগ্রগতি নির্ধারণ করা সম্ভব নয়। এটি সাধারণত ব্যবহার করা হয় যখন আপনি কোনো প্রসেসে আছেন এবং সেটি কতটুকু সম্পন্ন হয়েছে তা নির্ধারণ করা সম্ভব নয়। এই প্রগ্রেস বারটি একটানা ঘুরতে থাকে এবং এটি সাধারণত loading বা processing এর সময় ব্যবহৃত হয়।
২. Determinate Progress Bar
এটি একটি নির্ধারিত (determinate) প্রগ্রেস বার, যেখানে আপনি ব্যবহারকারীদের জানাতে পারেন যে কোন পর্যায়ে কাজ চলছে এবং কাজটি কতটুকু সম্পন্ন হয়েছে। এটি প্রগ্রেস বারকে পূর্ণতা প্রদর্শন করার মাধ্যমে কাজের অগ্রগতি প্রদর্শন করে।
MDL-এ Progress Bar ব্যবহার
১. Indeterminate Progress Bar Example
Indeterminate Progress Bar সাধারণত লোডিং বা প্রক্রিয়া চলছে এমন একটি অবস্থায় ব্যবহৃত হয়। এটি ব্যবহারকারীদের অপেক্ষা করার জন্য নির্দেশনা প্রদান করে।
<!-- Indeterminate Progress Bar -->
<dialog class="mdl-dialog">
<div class="mdl-dialog__content">
<h5>Loading...</h5>
<div class="mdl-spinner mdl-js-spinner is-active"></div>
</div>
</dialog>
<script src="https://cdnjs.cloudflare.com/ajax/libs/material-design-lite/1.3.0/material.min.js"></script>
এখানে:
- mdl-spinner: এটি MDL এর indeterminate progress bar (spinner) ব্যবহার করা হচ্ছে।
- mdl-js-spinner: এটি স্পিনারটি কার্যকর করতে ব্যবহৃত ক্লাস।
- is-active: এটি স্পিনারটি চালু করতে ব্যবহৃত ক্লাস।
এই কোডটি একটি স্পিনিং ইন্ডিকেটর বা লোডিং স্পিনার তৈরি করবে, যা ব্যবহারকারীকে কোনো প্রক্রিয়া চলছে তা জানিয়ে দেবে।
২. Determinate Progress Bar Example
Determinate Progress Bar ব্যবহারকারীদের কাজের অগ্রগতি সম্পর্কে নির্দিষ্ট তথ্য প্রদান করে, যেমন "50% complete" বা "75% complete"।
<!-- Determinate Progress Bar -->
<progress class="mdl-progress mdl-js-progress" value="0" max="100"></progress>
<button class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored" id="startProgress">
Start Progress
</button>
<script src="https://cdnjs.cloudflare.com/ajax/libs/material-design-lite/1.3.0/material.min.js"></script>
<script>
var progressBar = document.querySelector('.mdl-progress');
var startButton = document.querySelector('#startProgress');
startButton.addEventListener('click', function() {
var value = 0;
var interval = setInterval(function() {
value += 10;
progressBar.value = value;
if (value >= 100) {
clearInterval(interval);
}
}, 500);
});
</script>
এখানে:
- mdl-progress: এটি MDL এর determinate progress bar তৈরি করার জন্য ব্যবহৃত ক্লাস।
- value: এটি প্রগ্রেস বারের বর্তমান অগ্রগতি নির্ধারণ করে (যেমন 0 থেকে 100 পর্যন্ত)।
- max: এটি প্রগ্রেস বারের পূর্ণ মান বা পরিমাণ নির্ধারণ করে (এখানে 100% মান দেওয়া হয়েছে)।
এটি একটি প্রগ্রেস বার তৈরি করবে, যা Start Progress বাটনে ক্লিক করলে প্রতি 500 মিলিসেকেন্ডে 10% অগ্রসর হবে এবং 100% সম্পূর্ণ হলে থেমে যাবে।
MDL Progress Bar কাস্টমাইজেশন
MDL এর Progress Bar কাস্টমাইজ করতে আপনি CSS এর মাধ্যমে বিভিন্ন উপাদান পরিবর্তন করতে পারেন, যেমন এর আকার, রঙ, এবং স্টাইল।
১. Progress Bar এর রঙ কাস্টমাইজ করা
MDL এর ডিফল্ট প্রগ্রেস বার রঙ পরিবর্তন করতে আপনি CSS ব্যবহার করতে পারেন:
.mdl-progress {
background-color: #f44336; /* Red */
}
এটি প্রগ্রেস বারের পেছনের রঙ পরিবর্তন করবে।
২. Progress Bar এর আকার কাস্টমাইজ করা
MDL প্রগ্রেস বারের আকার (উচ্চতা, প্রস্থ) CSS দিয়ে কাস্টমাইজ করা যেতে পারে।
.mdl-progress {
height: 20px;
}
এটি প্রগ্রেস বারের উচ্চতা বাড়িয়ে দেবে।
৩. Spinner এর কাস্টমাইজেশন
MDL এর indeterminate spinner বা loading spinner এর রঙ, আকার এবং স্পিড কাস্টমাইজ করা যায়।
.mdl-spinner {
width: 50px;
height: 50px;
border-color: #4CAF50; /* Green */
}
এটি স্পিনারের আকার এবং রঙ কাস্টমাইজ করবে।
MDL Progress Bar Component এর সুবিধা
১. ইউজার ফ্রেন্ডলি
MDL এর Progress Bar ব্যবহারকারীদের জন্য অত্যন্ত ইউজার ফ্রেন্ডলি। এটি সোজা, আকর্ষণীয় এবং ব্যবহারকারীকে তাদের কাজের অগ্রগতি সম্পর্কে জানানোর একটি সহজ উপায়।
২. রেসপন্সিভ ডিজাইন
MDL প্রগ্রেস বারটি রেসপন্সিভ, অর্থাৎ এটি মোবাইল, ট্যাবলেট, ডেস্কটপে একইভাবে ভালোভাবে প্রদর্শিত হবে।
৩. সহজ কাস্টমাইজেশন
MDL প্রগ্রেস বার এবং স্পিনার সহজেই কাস্টমাইজ করা যায় CSS এর মাধ্যমে, যা ডিজাইন এবং ব্যবহারকারীর অভিজ্ঞতা উন্নত করে।
৪. মডার্ন এবং সিম্পল
MDL-এর প্রগ্রেস বার ডিজাইন আধুনিক এবং সিম্পল, যা Material Design নীতির সাথে পুরোপুরি মানানসই।
সারাংশ
Material Design Lite (MDL) এর Progress Bar একটি গুরুত্বপূর্ণ উপাদান যা ব্যবহারকারীদের কাজের অগ্রগতি বা লোডিং অবস্থান সম্পর্কে ধারণা প্রদান করে। MDL-এ Indeterminate এবং Determinate প্রগ্রেস বার দুটি ভিন্ন উপায়ে ব্যবহার করা যায়। এগুলো কাস্টমাইজেশন এবং সহজ ব্যবহারের জন্য ডিজাইন করা হয়েছে, যাতে ওয়েবসাইটের ডিজাইন আরো সুন্দর এবং কার্যকরী হয়। CSS-এর মাধ্যমে আপনি MDL প্রগ্রেস বার এবং স্পিনার কাস্টমাইজ করতে পারেন এবং বিভিন্ন রঙ, আকার, স্পিড পরিবর্তন করতে পারবেন। MDL এর প্রগ্রেস বার কম্পোনেন্টটি অত্যন্ত উপযোগী এবং ইন্টারঅ্যাকটিভ ওয়েবসাইট ডিজাইন করতে সহায়তা করে।
Read more
