অগ্রগতি বারগুলি শতাংশের সময় কোনও কাজের সময় নির্দিষ্ট মাইলফলক নির্ধারণ করতে ব্যবহৃত হয়। আপনি একটি অগ্রগতি বার তৈরি করতে পারেন এটি কোনও কাজের সমাপ্তি অগ্রগতি নির্দিষ্ট করে। প্রগতি বারের মান জাভাস্ক্রিপ্ট দ্বারা ম্যানিপুলেট করা যেতে পারে। এই নিবন্ধে, আমরা নীচের অনুক্রমের মধ্যে কীভাবে আপনি এইচটিএমএল, সিএসএস এবং জাভাস্ক্রিপ্টের সাহায্যে একটি অগ্রগতি বার তৈরি করতে পারেন তা দেখতে পাবেন:
চল শুরু করি.
এইচটিএমএল এ কীভাবে একটি অগ্রগতি বার তৈরি করবেন?
একটি অগ্রগতি বার যে কোনও কাজ সম্পন্ন হচ্ছে তার অগ্রগতি চিত্রিত করে। সাধারণত, এই বারগুলি ডাউনলোড এবং আপলোডের স্থিতি দেখানোর জন্য ব্যবহৃত হয়। আমরা বলতে পারি যে অগ্রগতি বারগুলি যে কোনও কিছুতে যা চলছে তার স্থিতি চিত্রিত করতে ব্যবহার করা যেতে পারে।
ব্যবহার করে একটি বেসিক অগ্রগতি বার তৈরি করতে , নিম্নলিখিত পদক্ষেপগুলি সম্পাদন করা প্রয়োজন:
- আপনার অগ্রগতি বারের জন্য এইচটিএমএল কাঠামো তৈরি করুন - এইচটিএমএল ট্যাগ কোনও কাজের একটি সমাপ্তির অগ্রগতি নির্দিষ্ট করে।
- সিএসএস যুক্ত করা হচ্ছে - পরবর্তী পদক্ষেপটি প্রগতি বারের পটভূমির রঙের পাশাপাশি বারে অগ্রগতির স্থিতির সাহায্যে যুক্ত করা হয় সিএসএস ।
# প্রোগ্রেস_স্যাটাস {প্রস্থ: 50% ব্যাকগ্রাউন্ড-রঙ: # ডিডিডি} # এমপ্রোগ্রেসবার {প্রস্থ: 1% উচ্চতা: 35 পিক্স ব্যাকগ্রাউন্ড-রঙ: # 4 সিএফ 50 পাঠ্য-সাজান: কেন্দ্রের লাইন-উচ্চতা: 32px রঙ: কালো}- জাভাস্ক্রিপ্ট যুক্ত করা হচ্ছে - পরবর্তী পদক্ষেপটি ব্যবহার করে একটি গতিশীল অ্যানিমেটেড প্রেজ বার তৈরি করা জাভাস্ক্রিপ্ট ফাংশন হালনাগাদ এবং দৃশ্য ।
ফাংশন আপডেট () {var উপাদান = ডকুমেন্ট.সেটমেন্টবিইআইডি ('মাইপ্রোগ্রেসবার') ভোর প্রস্থ = 1 ভেরি পরিচয় = সেটইন্টারভাল (দৃশ্য, 10) ফাংশন দৃশ্য () {যদি (প্রস্থ> = 100) {ক্লিয়ারইন্টারভাল (পরিচয়)} অন্যথায় {প্রস্থ ++ element.style.width = প্রস্থ + '%'}}}এখন যেহেতু আপনি একটি অগ্রগতি বার তৈরির বিভিন্ন পদক্ষেপগুলি জানেন, এখন এগিয়ে চলুন এবং একটি অগ্রগতি বারের সম্পূর্ণ উদাহরণটি দেখুন।
অগ্রগতি বার: উদাহরণ
আপনি একবার অগ্রগতি বার তৈরির জন্য বিভিন্ন পদক্ষেপগুলি সম্পন্ন করার পরে, এইচটিএমএল, সিএসএস এবং লিঙ্ক করার সময় এসেছে জাভাস্ক্রিপ্ট উপাদান । নীচের উদাহরণটি উপরের লিঙ্কে অগ্রগতি বারের সম্পূর্ণ কোড দেখায় এইচটিএমএল, সিএসএস এবং জাভাস্ক্রিপ্ট কোডগুলি:
# প্রোগ্রেস_স্যাটাস {প্রস্থ: 50% ব্যাকগ্রাউন্ড-রঙ: # ডিডিডি} # এমপ্রোগ্রেসবার {প্রস্থ: 2% উচ্চতা: 20 পিক্স ব্যাকগ্রাউন্ড-রঙ: # 4 সিএফ 50}জাভাস্ক্রিপ্ট ব্যবহার করে অগ্রগতি বারের উদাহরণ
একটি ফাইলের স্থিতি ডাউনলোড করুন:
ডাউনলোড ফাংশন আপডেট শুরু করুন () element var উপাদান = ডকুমেন্ট.জেট এলিমেন্টবাইআইডি ('মাইপ্রোগ্রেসবার') ভোর প্রস্থ = 1 বর্ণ পরিচয় = সেটইন্টারভাল (দৃশ্য, 10) ফাংশন দৃশ্য () {যদি (প্রস্থ> = 100) {ক্লিয়ারইন্টারভাল (পরিচয়)} অন্যথায় {প্রস্থ ++ উপাদান.স্টাইল.উইথ = প্রস্থ + '%'}}}আউটপুট:
এটির সাথে আমরা আমাদের নিবন্ধের শেষে এসেছি। আমি আশা করি আপনি একটি অগ্রগতি বার তৈরি করতে প্রয়োজনীয় বিভিন্ন পদক্ষেপ বুঝতে পেরেছেন।
আমাদের দেখুন যা প্রশিক্ষকের নেতৃত্বাধীন লাইভ প্রশিক্ষণ এবং বাস্তব জীবনের প্রকল্পের অভিজ্ঞতার সাথে আসে। এই প্রশিক্ষণটি আপনাকে ব্যাক-এন্ড এবং ফ্রন্ট-এন্ড ওয়েব প্রযুক্তিগুলির সাথে কাজ করার দক্ষতায় দক্ষ করে তোলে। এটিতে ওয়েব ডেভলপমেন্ট, জিক্যুয়ারি, অ্যাঙ্গুলার, নোডজেএস, এক্সপ্রেসজেএস এবং মঙ্গোডিবি প্রশিক্ষণ অন্তর্ভুক্ত রয়েছে।
পিএইচপি মধ্যে print_r
আমাদের জন্য একটি প্রশ্ন আছে? দয়া করে এই ব্লগের মন্তব্য বিভাগে এটি উল্লেখ করুন এবং আমরা আপনার কাছে ফিরে আসব।