বুটস্ট্র্যাপ স্পিনার সহ একটি কম্পোনেন্ট বা পৃষ্ঠার লোডিং অবস্থা নির্দেশ করুন, সম্পূর্ণরূপে HTML, CSS, এবং কোন জাভাস্ক্রিপ্ট নেই।
সম্পর্কিত
বুটস্ট্র্যাপ "স্পিনার" আপনার প্রকল্পে লোডিং অবস্থা দেখানোর জন্য ব্যবহার করা যেতে পারে। এগুলি শুধুমাত্র এইচটিএমএল এবং সিএসএস দিয়ে তৈরি করা হয়েছে, যার অর্থ এগুলি তৈরি করতে আপনার কোনও জাভাস্ক্রিপ্টের প্রয়োজন নেই৷ তবে তাদের দৃশ্যমানতা টগল করতে আপনার কিছু কাস্টম জাভাস্ক্রিপ্টের প্রয়োজন হবে। আমাদের আশ্চর্যজনক ইউটিলিটি ক্লাসগুলির সাথে তাদের চেহারা, প্রান্তিককরণ এবং আকারগুলি সহজেই কাস্টমাইজ করা যেতে পারে।
অ্যাক্সেসযোগ্যতার উদ্দেশ্যে, এখানে প্রতিটি লোডার অন্তর্ভুক্ত role="status"এবং একটি নেস্টেড <span class="sr-only">Loading...</span>।
বর্ডার স্পিনার
লাইটওয়েট লোডিং ইন্ডিকেটরের জন্য বর্ডার স্পিনার ব্যবহার করুন।
লোড হচ্ছে...
রং
বর্ডার স্পিনার currentColorএটির জন্য ব্যবহার করে, যার অর্থ আপনি টেক্সট কালার ইউটিলিটিগুলিরborder-color সাথে রঙটি কাস্টমাইজ করতে পারেন । আপনি স্ট্যান্ডার্ড স্পিনারে আমাদের যেকোন টেক্সট কালার ইউটিলিটি ব্যবহার করতে পারেন।
লোড হচ্ছে...
লোড হচ্ছে...
লোড হচ্ছে...
লোড হচ্ছে...
লোড হচ্ছে...
লোড হচ্ছে...
লোড হচ্ছে...
লোড হচ্ছে...
কেন border-colorইউটিলিটি ব্যবহার করবেন না? প্রতিটি বর্ডার স্পিনার transparentঅন্তত একটি দিকের জন্য একটি সীমানা নির্দিষ্ট করে, তাই .border-{color}ইউটিলিটিগুলি সেটিকে ওভাররাইড করবে।
ক্রমবর্ধমান স্পিনার
আপনি যদি বর্ডার স্পিনার পছন্দ না করেন তবে গ্রো স্পিনারের দিকে যান। যদিও এটি প্রযুক্তিগতভাবে স্পিন করে না, এটি বারবার বৃদ্ধি পায়!
লোড হচ্ছে...
আবারও, এই স্পিনারটি দিয়ে তৈরি করা হয়েছে , যাতে আপনি পাঠ্য রঙের ইউটিলিটিগুলিরcurrentColor সাথে সহজেই এর চেহারা পরিবর্তন করতে পারেন । এখানে এটি নীল রঙে, সমর্থিত ভেরিয়েন্ট সহ।
লোড হচ্ছে...
লোড হচ্ছে...
লোড হচ্ছে...
লোড হচ্ছে...
লোড হচ্ছে...
লোড হচ্ছে...
লোড হচ্ছে...
লোড হচ্ছে...
প্রান্তিককরণ
বুটস্ট্র্যাপের স্পিনারগুলি rems, currentColor, এবং দিয়ে তৈরি করা হয় display: inline-flex। এর মানে হল সেগুলি সহজেই পুনরায় আকার দেওয়া, পুনরায় রঙ করা এবং দ্রুত সারিবদ্ধ করা যায়।
যোগ করুন .spinner-border-smএবং .spinner-grow-smএকটি ছোট স্পিনার তৈরি করুন যা দ্রুত অন্যান্য উপাদানের মধ্যে ব্যবহার করা যেতে পারে।
লোড হচ্ছে...
লোড হচ্ছে...
অথবা, প্রয়োজন অনুযায়ী মাত্রা পরিবর্তন করতে কাস্টম CSS বা ইনলাইন শৈলী ব্যবহার করুন।
লোড হচ্ছে...
লোড হচ্ছে...
বোতাম
একটি অ্যাকশন বর্তমানে প্রক্রিয়া করা হচ্ছে বা হচ্ছে তা নির্দেশ করতে বোতামের মধ্যে স্পিনার ব্যবহার করুন। আপনি স্পিনার উপাদান থেকে পাঠ্য অদলবদল করতে পারেন এবং প্রয়োজন অনুসারে বোতাম পাঠ্য ব্যবহার করতে পারেন।