Material Design Lite (MDL) একটি আধুনিক এবং ইউজার-বান্ধব ফ্রন্ট-এন্ড ফ্রেমওয়ার্ক, যা গুগলের Material Design নীতির উপর ভিত্তি করে তৈরি। MDL ব্যবহার করে আপনি custom spinners এবং progress indicators তৈরি করতে পারেন, যা ওয়েব পেজে কোনো প্রক্রিয়া চলছে তা ব্যবহারকারীদের জানিয়ে দেয় এবং তাদের অভিজ্ঞতা উন্নত করে।
এই টিউটোরিয়ালে, আমরা দেখব কিভাবে MDL ব্যবহার করে custom spinners এবং progress indicators তৈরি করা যায় এবং কিভাবে এগুলো কাস্টমাইজ করা যায়।
MDL Spinners
Spinners সাধারণত ওয়েব পেজে লোডিং বা প্রসেসিং এর জন্য ব্যবহৃত হয়। MDL এর স্পিনার কম্পোনেন্টটি ব্যবহারকারীকে জানায় যে কিছু কাজ চলমান রয়েছে এবং এটি অপ্রত্যাশিত সময়ের জন্য অপেক্ষা করতে সহায়তা করে।
MDL Spinner ব্যবহার করা
MDL-এ spinner তৈরি করতে mdl-spinner এবং mdl-js-spinner ক্লাস ব্যবহার করা হয়। স্পিনার সাধারণত is-active ক্লাসের মাধ্যমে সক্রিয় হয়।
উদাহরণ: Basic Spinner
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MDL Spinner</title>
<!-- MDL CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/material-design-lite/1.3.0/material.min.css">
</head>
<body>
<!-- Spinner -->
<div class="mdl-spinner mdl-js-spinner is-active"></div>
<!-- MDL JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/material-design-lite/1.3.0/material.min.js"></script>
</body>
</html>
ব্যাখ্যা:
- mdl-spinner: MDL স্পিনারের জন্য ব্যবহৃত ক্লাস।
- mdl-js-spinner: এটি JavaScript কার্যকারিতা প্রয়োগ করতে ব্যবহৃত ক্লাস।
- is-active: এই ক্লাসটি স্পিনারটি চালু করে, অর্থাৎ এটি লোডিং বা প্রক্রিয়া চলমান অবস্থায় থাকে।
এটি একটি স্পিনার তৈরি করবে, যা লোডিং চলাকালে ব্যবহারকারীদের দেখানো হবে।
MDL Progress Indicators
Progress indicators হল এমন একটি উপাদান যা ব্যবহারকারীদের কোনো প্রক্রিয়া বা কাজের অগ্রগতি দেখায়। MDL-এ দুটি মূল ধরনের progress indicators রয়েছে: linear progress bar এবং circular progress indicator। এগুলো সাধারণত লোডিং বা কাজ চলমান অবস্থায় ব্যবহার করা হয়।
MDL Circular Progress Indicator
Circular progress indicator একটি বৃত্তাকার অ্যানিমেশন প্রদর্শন করে যা কাজের অগ্রগতি জানায়। এটি MDL-এ খুব সহজে তৈরি করা যায়।
উদাহরণ: Circular Progress Indicator
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MDL Circular Progress</title>
<!-- MDL CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/material-design-lite/1.3.0/material.min.css">
</head>
<body>
<!-- Circular Progress -->
<div class="mdl-spinner mdl-js-spinner is-active mdl-spinner--single-color"></div>
<!-- MDL JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/material-design-lite/1.3.0/material.min.js"></script>
</body>
</html>
MDL Linear Progress Indicator
Linear progress indicator একটি রৈখিক বার হিসেবে কাজ করে, যা নির্দিষ্ট প্রগ্রেস বা কাজের অগ্রগতি প্রদর্শন করে। এটি সাধারণত প্রক্রিয়ার অগ্রগতি দেখানোর জন্য ব্যবহৃত হয়।
উদাহরণ: Linear Progress Indicator
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MDL Linear Progress</title>
<!-- MDL CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/material-design-lite/1.3.0/material.min.css">
</head>
<body>
<!-- Linear Progress -->
<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: এটি প্রগ্রেস বারটি অজানা অবস্থায় রাখে, অর্থাৎ লোডিং বা প্রক্রিয়া চলমান অবস্থায় রাখে।
এটি একটি indeterminate প্রগ্রেস বার তৈরি করবে, যা চলতে থাকবে কিন্তু নির্দিষ্ট পরিমাণ অগ্রগতি দেখাবে না।
Custom Spinners এবং Progress Indicators কাস্টমাইজেশন
MDL এর Spinners এবং Progress Indicators কাস্টমাইজ করা খুবই সহজ। আপনি চাইলে স্পিনারের আকার, রঙ, এবং অন্যান্য ডিজাইন পরিবর্তন করতে পারেন।
১. Spinner এর রঙ পরিবর্তন
.mdl-spinner--single-color {
color: #4caf50; /* Green color */
}
এটি স্পিনারের রঙ পরিবর্তন করবে।
২. Spinner এর আকার কাস্টমাইজ করা
.mdl-spinner {
width: 50px;
height: 50px;
}
এটি স্পিনারের আকার পরিবর্তন করবে।
৩. Linear Progress Bar এর রঙ কাস্টমাইজ করা
.mdl-progress__bar {
background-color: #ff5722; /* Orange color */
}
এটি linear progress bar এর রঙ পরিবর্তন করবে।
৪. Circular Progress Indicator এর সাইজ কাস্টমাইজ করা
.mdl-spinner {
width: 70px;
height: 70px;
}
এটি circular progress indicator এর আকার বড় করবে।
সারাংশ
Material Design Lite (MDL) এর Spinners এবং Progress Indicators ব্যবহারকারীদের জন্য লোডিং বা কার্যক্রমের অগ্রগতি সম্পর্কে ইন্ডিকেটর প্রদান করে। MDL ব্যবহার করে আপনি circular এবং linear প্রগ্রেস ইন্ডিকেটর খুব সহজে তৈরি এবং কাস্টমাইজ করতে পারেন। MDL-এ এই কম্পোনেন্টগুলোর রঙ, আকার এবং অন্যান্য বৈশিষ্ট্য পরিবর্তন করা যায়। Spinners এবং Progress Indicators ওয়েব ডিজাইনকে আরও ইন্টারঅ্যাকটিভ এবং ব্যবহারকারী-বান্ধব করে তোলে। MDL-এ এই কম্পোনেন্টগুলো ব্যবহার করে আপনি আপনার ওয়েব পেজে কার্যকরী এবং আকর্ষণীয় লোডিং ইন্ডিকেটর যোগ করতে পারেন।
Read more
