Progress Bar এবং Spinners

Material Design Lite (MDL) একটি আধুনিক ফ্রন্ট-এন্ড ফ্রেমওয়ার্ক যা গুগলের Material Design নীতির উপর ভিত্তি করে তৈরি। MDL ব্যবহার করে আপনি Progress Bar এবং Spinners সহজেই তৈরি করতে পারেন, যা ওয়েবসাইটে বিভিন্ন ধরনের প্রগ্রেস এবং লোডিং ইন্ডিকেটর হিসাবে কাজ করে। এগুলো ওয়েব পেজে কার্যকলাপের অবস্থান প্রদর্শন করে, ব্যবহারকারীদের অভিজ্ঞতা উন্নত করতে সাহায্য করে।

এই টিউটোরিয়ালে, আমরা MDL এর Progress Bar এবং Spinners এর ব্যবহারের পদ্ধতি এবং কাস্টমাইজেশন দেখব।

MDL এর Progress Bar তৈরি করা

Progress Bar সাধারণত ব্যবহারকারীদের জন্য লোডিং বা অপারেশন কমপ্লিট হওয়ার অগ্রগতি প্রদর্শন করে। MDL-এ সোজা এবং আধুনিক প্রগ্রেস বার তৈরি করা সম্ভব, যা নির্দিষ্ট সময়ের মধ্যে কাজ সম্পন্ন হওয়ার পর গ্রাফিক্যালি ইন্ডিকেটর হিসেবে কাজ করে।

MDL Progress Bar এর সাধারণ কাঠামো

<!-- Progress Bar -->
<progress class="mdl-progress mdl-js-progress" value="50" max="100"></progress>

<!-- MDL JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/material-design-lite/1.3.0/material.min.js"></script>

ব্যাখ্যা:

• mdl-progress mdl-js-progress: এই ক্লাসটি Progress Bar তৈরি করার জন্য ব্যবহৃত হয়।
• value="50": এটি প্রগ্রেসের বর্তমান অবস্থান, যেটি 0 থেকে 100 পর্যন্ত হবে।
• max="100": এটি সর্বোচ্চ মান, যা সাধারণত 100 হবে (100% প্রগ্রেস)।

এটি একটি সাধারন প্রগ্রেস বার তৈরি করবে, যা 50% কাজ সম্পন্ন হয়েছে বলে দেখাবে। আপনি value পরিবর্তন করে প্রগ্রেসের পরিমাণ নিয়ন্ত্রণ করতে পারেন।

MDL এর Determinate এবং Indeterminate Progress Bar

MDL প্রগ্রেস বার দুই ধরনের হতে পারে:

1. Determinate: যেখানে প্রগ্রেসের সঠিক পরিমাণ থাকে।
2. Indeterminate: যেখানে প্রগ্রেসের পরিমাণ অজানা থাকে (যেমন যখন কিছু লোড হচ্ছে কিন্তু কতটুকু বাকি তা জানি না)।

১. Determinate Progress Bar

<!-- Determinate Progress Bar -->
<progress class="mdl-progress mdl-js-progress" value="70" max="100"></progress>

এটি প্রগ্রেস বারের অবস্থানকে 70% দেখাবে।

২. Indeterminate Progress Bar

<!-- Indeterminate Progress Bar -->
<progress class="mdl-progress mdl-js-progress mdl-progress__indeterminate"></progress>

এটি একটি indeterminate প্রগ্রেস বার তৈরি করবে, যা চলতে থাকবে কিন্তু কোনো নির্দিষ্ট পরিমাণ বা সময় দেখাবে না। এটি সাধারণত লোডিং বা অপারেশন প্রক্রিয়ায় ব্যবহার হয়।

MDL এর Spinners (লোডিং স্পিনার) তৈরি করা

Spinners বা লোডিং ইন্ডিকেটর সাধারণত ওয়েব পেজ বা অ্যাপ্লিকেশন লোড হওয়ার সময় ব্যবহারকারীদেরকে অপেক্ষা করতে বলে এবং ব্যবহারকারীর অভিজ্ঞতাকে উন্নত করে। MDL-এ দুটি সাধারণ ধরনের স্পিনার রয়েছে:

1. Circular Spinner (বৃত্তাকার স্পিনার)
2. Linear Spinner (রৈখিক স্পিনার)

১. Circular Spinner (বৃত্তাকার স্পিনার)

<!-- Circular Spinner -->
<div class="mdl-spinner mdl-js-spinner is-active"></div>

<!-- MDL JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/material-design-lite/1.3.0/material.min.js"></script>

এটি একটি circular spinner তৈরি করবে, যা ব্যবহারকারীর কাছে লোডিং চলমান অবস্থায় একটি বৃত্তাকার অ্যানিমেশন প্রদর্শন করবে।

ব্যাখ্যা:

• mdl-spinner: স্পিনার কম্পোনেন্টের জন্য ব্যবহৃত ক্লাস।
• mdl-js-spinner: JavaScript কার্যকারিতা প্রয়োগ করার জন্য ব্যবহৃত ক্লাস।
• is-active: স্পিনারটি সক্রিয় (অথবা চলমান) থাকবে, এটি দিয়ে স্পিনারটি চালু হবে।

২. Linear Spinner (রৈখিক স্পিনার)

<!-- Linear Spinner -->
<div class="mdl-progress mdl-js-progress mdl-progress__indeterminate"></div>

<!-- MDL JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/material-design-lite/1.3.0/material.min.js"></script>

এটি একটি linear spinner তৈরি করবে, যা একটি রৈখিক প্রগ্রেস বার হিসাবে কাজ করবে এবং ব্যবহারকারীকে অপেক্ষা করার সংকেত প্রদান করবে। এটি mdl-progress এর মতই কাজ করে, তবে এখানে mdl-progress__indeterminate ক্লাস ব্যবহার করা হয়েছে।

MDL Progress Bar এবং Spinners কাস্টমাইজেশন

MDL এর Progress Bar এবং Spinners খুবই কাস্টমাইজেবল। আপনি CSS এবং MDL ক্লাস ব্যবহার করে এগুলোর আকার, রঙ, এবং কার্যকারিতা পরিবর্তন করতে পারেন।

১. Progress Bar এর রঙ পরিবর্তন

/* রঙ পরিবর্তন */
.mdl-progress {
  background-color: #e0e0e0;
}

.mdl-progress[value] {
  background-color: #4caf50;
}

এটি progress bar এর ব্যাকগ্রাউন্ড এবং প্রগ্রেসের রঙ পরিবর্তন করবে।

২. Circular Spinner এর আকার কাস্টমাইজ করা

/* Circular Spinner এর আকার কাস্টমাইজ করা */
.mdl-spinner {
  width: 50px;
  height: 50px;
}

এটি স্পিনারের আকার 50px করে দিবে।

সারাংশ

Material Design Lite (MDL) এর Progress Bar এবং Spinners ব্যবহার করে ওয়েব পেজে লোডিং ইন্ডিকেটর এবং প্রগ্রেস দেখানো সহজ। MDL এর determinate এবং indeterminate প্রগ্রেস বার এবং circular এবং linear স্পিনার ব্যবহার করে আপনি সহজেই ওয়েব পেজে কার্যকলাপের অগ্রগতি বা লোডিং প্রদর্শন করতে পারবেন। MDL-এ এগুলো কাস্টমাইজ করাও খুবই সহজ, আপনি CSS ক্লাস ব্যবহার করে এগুলোর রঙ, আকার এবং ডিজাইন পরিবর্তন করতে পারবেন, যা ওয়েবসাইটের ডিজাইনকে আরো আধুনিক এবং ইন্টারঅ্যাকটিভ করে তোলে।

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 এর প্রগ্রেস বার কম্পোনেন্টটি অত্যন্ত উপযোগী এবং ইন্টারঅ্যাকটিভ ওয়েবসাইট ডিজাইন করতে সহায়তা করে।

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 এর প্রগ্রেস বারটি কাস্টমাইজ করা সহজ এবং ব্যবহারকারী ইন্টারফেসে আকর্ষণীয় অ্যানিমেশন এবং ফাংশনালিটি প্রদান করে।

Material Design Lite (MDL) একটি জনপ্রিয় ফ্রন্ট-এন্ড ফ্রেমওয়ার্ক, যা গুগলের Material Design নীতির উপর ভিত্তি করে তৈরি। MDL-এর Spinner Component ব্যবহারকারীকে একটি লোডিং বা প্রসেসিং স্টেটের মাধ্যমে নির্দেশ দেয়, যখন কোনো ডেটা বা কন্টেন্ট লোড হচ্ছে বা একটি অ্যাকশন সম্পন্ন হচ্ছে। এটি সাধারণত ব্যবহারকারীকে দেখানোর জন্য ব্যবহৃত হয় যে, সিস্টেম কোনো কাজ করছে এবং এটি শেষ হতে কিছুটা সময় নেবে।

MDL এর Spinner সাধারণত একটি ছোট এবং আকর্ষণীয় অ্যানিমেটেড বাটন বা রিং হয়ে থাকে, যা লোডিং স্টেট দেখানোর জন্য ব্যবহার করা হয়।

MDL Spinner Component কী?

Spinner বা Progress Spinner হল একটি গেটার বা রিং শেপ যা ইন্টারঅ্যাকটিভ ওয়েব অ্যাপ্লিকেশনের মধ্যে সাধারণত ব্যবহারকারীদের কাছে লোডিং বা প্রগ্রেস দেখানোর জন্য ব্যবহৃত হয়। MDL-এ Spinner ব্যবহার করা খুবই সহজ এবং এর জন্য কোনো অতিরিক্ত কনফিগারেশন প্রয়োজন হয় না। MDL mdl-spinner ক্লাস ব্যবহার করে আপনি একটি স্পিনার তৈরি করতে পারেন।

MDL Spinner এর বেসিক ব্যবহার

MDL Spinner সাধারণত ডেটা লোডিং বা কোনো অ্যাকশন সম্পন্ন হতে সময় নিলে ব্যবহারকারীকে প্রদর্শন করতে ব্যবহৃত হয়। এটি সাধারণত একটি বাটনের উপরে অথবা নির্দিষ্ট জায়গায় প্রদর্শিত হয়। MDL-এ Spinner ব্যবহার করতে হলে আপনাকে HTML এবং CSS ক্লাস ব্যবহার করতে হবে।

বেসিক MDL Spinner উদাহরণ:

<!-- Button to trigger spinner -->
<button class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored" id="showSpinner">
  Show Spinner
</button>

<!-- MDL 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>

<script>
  // Get the spinner element
  var spinner = document.querySelector('.mdl-spinner');

  // Get the button that triggers the spinner
  var showSpinnerButton = document.querySelector('#showSpinner');

  // Show the spinner when the button is clicked
  showSpinnerButton.addEventListener('click', function() {
    spinner.classList.add('is-active');
  });
</script>

এখানে:

• mdl-spinner: এটি স্পিনার তৈরি করতে ব্যবহৃত ক্লাস।
• is-active: এই ক্লাসটি স্পিনারকে অ্যাক্টিভ বা প্রদর্শনযোগ্য করে তোলে।
• mdl-js-spinner: MDL এর স্পিনার কম্পোনেন্টে ব্যবহৃত ক্লাস।

এটি একটি বেসিক MDL Spinner তৈরি করবে। যখন ব্যবহারকারী "Show Spinner" বাটনে ক্লিক করবেন, তখন স্পিনারটি প্রদর্শিত হবে।

MDL Spinner কাস্টমাইজেশন

MDL Spinner এর আকার, রঙ এবং অ্যানিমেশন পরিবর্তন করতে কিছু সহজ কাস্টমাইজেশন করতে পারবেন। নিচে কিছু কাস্টমাইজেশন দেখানো হলো।

১. Spinner এর আকার পরিবর্তন করা

MDL Spinner এর আকার পরিবর্তন করার জন্য আপনি mdl-spinner--single-color বা mdl-spinner--size- ক্লাস ব্যবহার করতে পারেন। এর মাধ্যমে আপনি স্পিনারের সাইজ কাস্টমাইজ করতে পারবেন।

উদাহরণ:

<!-- Small Spinner -->
<div class="mdl-spinner mdl-js-spinner is-active mdl-spinner--size-1"></div>

<!-- Large Spinner -->
<div class="mdl-spinner mdl-js-spinner is-active mdl-spinner--size-3"></div>

এখানে, mdl-spinner--size-1 ছোট স্পিনার তৈরি করবে এবং mdl-spinner--size-3 বড় স্পিনার তৈরি করবে।

২. Spinner এর রঙ কাস্টমাইজ করা

MDL Spinner এর রঙ পরিবর্তন করতে আপনি mdl-spinner--multi-color বা mdl-spinner--single-color ক্লাস ব্যবহার করতে পারেন।

উদাহরণ:

<!-- Multi-color Spinner -->
<div class="mdl-spinner mdl-js-spinner is-active mdl-spinner--multi-color"></div>

<!-- Single-color Spinner -->
<div class="mdl-spinner mdl-js-spinner is-active mdl-spinner--single-color"></div>

এখানে, mdl-spinner--multi-color একাধিক রঙের স্পিনার তৈরি করবে, এবং mdl-spinner--single-color একক রঙের স্পিনার তৈরি করবে।

MDL Spinner এর ব্যবহার এবং সুবিধা

MDL Spinner ব্যবহার করার কিছু গুরুত্বপূর্ণ সুবিধা হলো:

১. ইন্টারঅ্যাকটিভ ব্যবহারকারীর অভিজ্ঞতা

MDL Spinner ব্যবহারকারীকে লোডিং বা প্রগ্রেস স্টেট প্রদর্শন করতে সহায়তা করে, যা ওয়েবসাইট বা অ্যাপ্লিকেশন ব্যবহারের সময় ব্যবহৃত কার্যকলাপের জন্য একটি ইন্টারঅ্যাকটিভ অনুভূতি তৈরি করে।

২. স্বচ্ছ এবং আকর্ষণীয় ডিজাইন

MDL Spinner-এর ডিজাইন খুবই পরিষ্কার, আকর্ষণীয় এবং গুগলের Material Design নীতির অনুসরণ করে। এটি সিস্টেমের লোডিং স্টেটগুলো পরিষ্কারভাবে প্রদর্শন করে এবং ব্যবহারকারীকে ইনফরমেশন প্রক্রিয়া সম্পর্কে অবহিত রাখে।

৩. সহজ কাস্টমাইজেশন

MDL Spinner খুব সহজে কাস্টমাইজ করা যায়। আপনি স্পিনার সাইজ, রঙ এবং অ্যানিমেশন টাইপ পরিবর্তন করে আপনার প্রয়োজন অনুযায়ী এটি কাস্টমাইজ করতে পারেন।

৪. রেসপন্সিভ ডিজাইন

MDL Spinner রেসপন্সিভ ডিজাইন সমর্থন করে, যা মোবাইল, ট্যাবলেট এবং ডেস্কটপে সমানভাবে কাজ করে।

সারাংশ

Material Design Lite (MDL) এর Spinner Component ব্যবহারকারীর জন্য একটি কার্যকরী টুল যা ওয়েবসাইট বা অ্যাপ্লিকেশনের লোডিং বা প্রসেসিং স্টেট দেখাতে ব্যবহৃত হয়। MDL-এ Spinner খুবই সহজে তৈরি এবং কাস্টমাইজ করা যায়। আপনি স্পিনার সাইজ, রঙ, এবং অ্যানিমেশন পরিবর্তন করে এটিকে আপনার ডিজাইন এবং প্রয়োজন অনুযায়ী তৈরি করতে পারেন। MDL Spinner এর মাধ্যমে আপনার ওয়েবসাইট বা অ্যাপ্লিকেশনের ব্যবহারকারীর অভিজ্ঞতা উন্নত করতে সহায়তা করা যায়।

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-এ এই কম্পোনেন্টগুলো ব্যবহার করে আপনি আপনার ওয়েব পেজে কার্যকরী এবং আকর্ষণীয় লোডিং ইন্ডিকেটর যোগ করতে পারেন।