Materialize CSS-এ Progress Bar একটি গুরুত্বপূর্ণ ইউজার ইন্টারফেস উপাদান, যা ডেটা লোড বা কোনো প্রক্রিয়া চলমান থাকার সময় ব্যবহারকারীকে প্রক্রিয়ার অবস্থা দেখানোর জন্য ব্যবহৃত হয়। এটি খুব সহজেই Materialize ফ্রেমওয়ার্ক ব্যবহার করে তৈরি করা যায় এবং এটি indeterminate (অনির্ধারিত) এবং determinate (নির্ধারিত) দুই ধরনের প্রগ্রেস বার সাপোর্ট করে।
এখানে Materialize CSS ব্যবহার করে 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>Materialize Determinate Progress Bar</title>
<!-- Materialize CSS -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet">
</head>
<body>
<!-- Determinate Progress Bar -->
<div class="progress">
<div class="determinate" style="width: 70%"></div>
</div>
<!-- Materialize JS and jQuery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</body>
</html>
এখানে:
- progress: এটি প্রগ্রেস বারটির মূল কন্টেইনার।
- determinate: এটি প্রগ্রেস বারের নির্দিষ্ট অংশকে উপস্থাপন করে।
- style="width: 70%": এটি প্রগ্রেস বারের পূর্ণতার পরিমাণ নির্ধারণ করে, যেখানে 70% এর মানে হচ্ছে প্রগ্রেস বারের 70% পূর্ণ।
এটি একটি সাধারন determinate 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>Materialize Indeterminate Progress Bar</title>
<!-- Materialize CSS -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet">
</head>
<body>
<!-- Indeterminate Progress Bar -->
<div class="progress">
<div class="indeterminate"></div>
</div>
<!-- Materialize JS and jQuery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</body>
</html>
এখানে:
- indeterminate: এটি ইন্ডিটারমিনেট প্রগ্রেস বারের জন্য ব্যবহৃত ক্লাস, যা বারটি চলমান অবস্থায় থাকে এবং কখনো পূর্ণ হয় না।
Indeterminate Progress Bar ব্যবহারকারীদের জানিয়ে দেয় যে কোনো কাজ চলছে, কিন্তু কাজটির পূর্ণতা সম্পর্কে কোনো ধারণা থাকে না।
৩. Progress Bar কাস্টমাইজেশন
Materialize CSS-এ আপনি Progress Bar এর বিভিন্ন বৈশিষ্ট্য কাস্টমাইজ করতে পারেন, যেমন রঙ, আকার, এবং স্টাইল।
৩.১ Progress Bar রঙ পরিবর্তন করা
Materialize CSS-এ আপনি বিভিন্ন রঙের প্রগ্রেস বার তৈরি করতে পারেন। উদাহরণস্বরূপ:
<div class="progress red">
<div class="determinate" style="width: 50%"></div>
</div>
এখানে red ক্লাসটি ব্যবহার করা হয়েছে, যাতে প্রগ্রেস বারটি লাল রঙে প্রদর্শিত হয়।
৩.২ Height বা উচ্চতা পরিবর্তন করা
আপনি প্রগ্রেস বারের উচ্চতা কাস্টমাইজ করতে CSS ব্যবহার করতে পারেন।
<div class="progress" style="height: 20px;">
<div class="determinate" style="width: 70%"></div>
</div>
এখানে style="height: 20px;" কোডটি প্রগ্রেস বারের উচ্চতা পরিবর্তন করতে ব্যবহৃত হয়েছে।
৪. 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>Materialize Progress Bar with JavaScript</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet">
</head>
<body>
<div class="progress">
<div id="progress-bar" class="determinate" style="width: 0%"></div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script>
let progress = 0;
let interval = setInterval(function() {
progress += 10;
$('#progress-bar').css('width', progress + '%');
if (progress >= 100) {
clearInterval(interval);
}
}, 1000);
</script>
</body>
</html>
এখানে:
- setInterval() ফাংশনটি প্রতি 1 সেকেন্ডে প্রগ্রেস বারটি 10% বাড়ায়।
- clearInterval() প্রগ্রেস 100% হয়ে গেলে ইন্টারভ্যাল বন্ধ করে দেয়।
উপসংহার
Materialize CSS-এ Progress Bar তৈরি করা অত্যন্ত সহজ এবং এটি ওয়েবসাইট বা অ্যাপে কাজের প্রক্রিয়া বা অগ্রগতি দেখানোর জন্য একটি গুরুত্বপূর্ণ উপাদান। আপনি determinate প্রগ্রেস বার ব্যবহার করে নির্দিষ্ট অগ্রগতি প্রদর্শন করতে পারেন এবং indeterminate প্রগ্রেস বার ব্যবহার করে চলমান প্রক্রিয়া সম্পর্কে জানান দিতে পারেন। Materialize CSS এর সিম্পল সিনট্যাক্স এবং কাস্টমাইজেশন অপশন ব্যবহার করে আপনি আপনার প্রগ্রেস বারকে আরও আকর্ষণীয় এবং কার্যকরী করতে পারেন।
Read more
