in English

স্পিনাররা

বুটস্ট্র্যাপ স্পিনার সহ একটি কম্পোনেন্ট বা পৃষ্ঠার লোডিং অবস্থা নির্দেশ করুন, সম্পূর্ণরূপে HTML, CSS, এবং কোন জাভাস্ক্রিপ্ট নেই।

সম্পর্কিত

বুটস্ট্র্যাপ "স্পিনার" আপনার প্রকল্পে লোডিং অবস্থা দেখানোর জন্য ব্যবহার করা যেতে পারে। এগুলি শুধুমাত্র এইচটিএমএল এবং সিএসএস দিয়ে তৈরি করা হয়েছে, যার অর্থ এগুলি তৈরি করতে আপনার কোনও জাভাস্ক্রিপ্টের প্রয়োজন নেই৷ তবে তাদের দৃশ্যমানতা টগল করতে আপনার কিছু কাস্টম জাভাস্ক্রিপ্টের প্রয়োজন হবে। আমাদের আশ্চর্যজনক ইউটিলিটি ক্লাসগুলির সাথে তাদের চেহারা, প্রান্তিককরণ এবং আকারগুলি সহজেই কাস্টমাইজ করা যেতে পারে।

অ্যাক্সেসযোগ্যতার উদ্দেশ্যে, এখানে প্রতিটি লোডার অন্তর্ভুক্ত role="status"এবং একটি নেস্টেড <span class="sr-only">Loading...</span>

এই উপাদানটির অ্যানিমেশন প্রভাব prefers-reduced-motionমিডিয়া প্রশ্নের উপর নির্ভর করে। আমাদের অ্যাক্সেসিবিলিটি ডকুমেন্টেশনের হ্রাসকৃত গতি বিভাগটি দেখুন ।

বর্ডার স্পিনার

লাইটওয়েট লোডিং ইন্ডিকেটরের জন্য বর্ডার স্পিনার ব্যবহার করুন।

লোড হচ্ছে...
<div class="spinner-border" role="status">
  <span class="sr-only">Loading...</span>
</div>

রং

বর্ডার স্পিনার currentColorএটির জন্য ব্যবহার করে, যার অর্থ আপনি টেক্সট কালার ইউটিলিটিগুলিরborder-color সাথে রঙটি কাস্টমাইজ করতে পারেন । আপনি স্ট্যান্ডার্ড স্পিনারে আমাদের যেকোন টেক্সট কালার ইউটিলিটি ব্যবহার করতে পারেন।

লোড হচ্ছে...
লোড হচ্ছে...
লোড হচ্ছে...
লোড হচ্ছে...
লোড হচ্ছে...
লোড হচ্ছে...
লোড হচ্ছে...
লোড হচ্ছে...
<div class="spinner-border text-primary" role="status">
  <span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-secondary" role="status">
  <span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-success" role="status">
  <span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-danger" role="status">
  <span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-warning" role="status">
  <span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-info" role="status">
  <span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-light" role="status">
  <span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-dark" role="status">
  <span class="sr-only">Loading...</span>
</div>
কেন border-colorইউটিলিটি ব্যবহার করবেন না? প্রতিটি বর্ডার স্পিনার transparentঅন্তত একটি দিকের জন্য একটি সীমানা নির্দিষ্ট করে, তাই .border-{color}ইউটিলিটিগুলি সেটিকে ওভাররাইড করবে।

ক্রমবর্ধমান স্পিনার

আপনি যদি বর্ডার স্পিনার পছন্দ না করেন তবে গ্রো স্পিনারের দিকে যান। যদিও এটি প্রযুক্তিগতভাবে স্পিন করে না, এটি বারবার বৃদ্ধি পায়!

লোড হচ্ছে...
<div class="spinner-grow" role="status">
  <span class="sr-only">Loading...</span>
</div>

আবারও, এই স্পিনারটি দিয়ে তৈরি করা হয়েছে , যাতে আপনি পাঠ্য রঙের ইউটিলিটিগুলিরcurrentColor সাথে সহজেই এর চেহারা পরিবর্তন করতে পারেন । এখানে এটি নীল রঙে, সমর্থিত ভেরিয়েন্ট সহ।

লোড হচ্ছে...
লোড হচ্ছে...
লোড হচ্ছে...
লোড হচ্ছে...
লোড হচ্ছে...
লোড হচ্ছে...
লোড হচ্ছে...
লোড হচ্ছে...
<div class="spinner-grow text-primary" role="status">
  <span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-secondary" role="status">
  <span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-success" role="status">
  <span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-danger" role="status">
  <span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-warning" role="status">
  <span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-info" role="status">
  <span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-light" role="status">
  <span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-dark" role="status">
  <span class="sr-only">Loading...</span>
</div>

প্রান্তিককরণ

বুটস্ট্র্যাপের স্পিনারগুলি rems, currentColor, এবং দিয়ে তৈরি করা হয় display: inline-flex। এর মানে হল সেগুলি সহজেই পুনরায় আকার দেওয়া, পুনরায় রঙ করা এবং দ্রুত সারিবদ্ধ করা যায়।

মার্জিন

সহজ ব্যবধানের জন্য মার্জিন ইউটিলিটি ব্যবহার করুন ।.m-5

লোড হচ্ছে...
<div class="spinner-border m-5" role="status">
  <span class="sr-only">Loading...</span>
</div>

বসানো

ফ্লেক্সবক্স ইউটিলিটি , ফ্লোট ইউটিলিটি , বা টেক্সট অ্যালাইনমেন্ট ইউটিলিটিগুলি ব্যবহার করুন স্পিনারগুলিকে ঠিক যেখানে আপনার প্রয়োজন সেখানে স্থাপন করুন৷

ফ্লেক্স

লোড হচ্ছে...
<div class="d-flex justify-content-center">
  <div class="spinner-border" role="status">
    <span class="sr-only">Loading...</span>
  </div>
</div>
লোড হচ্ছে...
<div class="d-flex align-items-center">
  <strong>Loading...</strong>
  <div class="spinner-border ml-auto" role="status" aria-hidden="true"></div>
</div>

ভাসছে

লোড হচ্ছে...
<div class="clearfix">
  <div class="spinner-border float-right" role="status">
    <span class="sr-only">Loading...</span>
  </div>
</div>

পাঠ্য সারিবদ্ধ করুন

লোড হচ্ছে...
<div class="text-center">
  <div class="spinner-border" role="status">
    <span class="sr-only">Loading...</span>
  </div>
</div>

আকার

যোগ করুন .spinner-border-smএবং .spinner-grow-smএকটি ছোট স্পিনার তৈরি করুন যা দ্রুত অন্যান্য উপাদানের মধ্যে ব্যবহার করা যেতে পারে।

লোড হচ্ছে...
লোড হচ্ছে...
<div class="spinner-border spinner-border-sm" role="status">
  <span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow spinner-grow-sm" role="status">
  <span class="sr-only">Loading...</span>
</div>

অথবা, প্রয়োজন অনুযায়ী মাত্রা পরিবর্তন করতে কাস্টম CSS বা ইনলাইন শৈলী ব্যবহার করুন।

লোড হচ্ছে...
লোড হচ্ছে...
<div class="spinner-border" style="width: 3rem; height: 3rem;" role="status">
  <span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow" style="width: 3rem; height: 3rem;" role="status">
  <span class="sr-only">Loading...</span>
</div>

বোতাম

একটি ক্রিয়া বর্তমানে প্রক্রিয়া করা হচ্ছে বা হচ্ছে তা নির্দেশ করতে বোতামের মধ্যে স্পিনার ব্যবহার করুন। আপনি স্পিনার উপাদান থেকে পাঠ্য অদলবদল করতে পারেন এবং প্রয়োজন অনুসারে বোতাম পাঠ্য ব্যবহার করতে পারেন।

<button class="btn btn-primary" type="button" disabled>
  <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
  <span class="sr-only">Loading...</span>
</button>
<button class="btn btn-primary" type="button" disabled>
  <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
  Loading...
</button>
<button class="btn btn-primary" type="button" disabled>
  <span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span>
  <span class="sr-only">Loading...</span>
</button>
<button class="btn btn-primary" type="button" disabled>
  <span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span>
  Loading...
</button>