স্পিনাররা

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

এই পৃষ্ঠায়

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

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

html

<div class="spinner-border" role="status">
  <span class="visually-hidden">Loading...</span>
</div>

রং

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

html

<div class="spinner-border text-primary" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-secondary" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-success" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-danger" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-warning" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-info" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-light" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-dark" role="status">
  <span class="visually-hidden">Loading...</span>
</div>

কেন border-colorইউটিলিটি ব্যবহার করবেন না? প্রতিটি বর্ডার স্পিনার transparentঅন্তত একটি দিকের জন্য একটি সীমানা নির্দিষ্ট করে, তাই .border-{color}ইউটিলিটিগুলি সেটিকে ওভাররাইড করবে।

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

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

html

<div class="spinner-grow" role="status">
  <span class="visually-hidden">Loading...</span>
</div>

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

html

<div class="spinner-grow text-primary" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-secondary" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-success" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-danger" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-warning" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-info" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-light" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-dark" role="status">
  <span class="visually-hidden">Loading...</span>
</div>

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

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

মার্জিন

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

html

<div class="spinner-border m-5" role="status">
  <span class="visually-hidden">Loading...</span>
</div>

বসানো

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

ফ্লেক্স

html

<div class="d-flex justify-content-center">
  <div class="spinner-border" role="status">
    <span class="visually-hidden">Loading...</span>
  </div>
</div>

লোড হচ্ছে...

html

<div class="d-flex align-items-center">
  <strong>Loading...</strong>
  <div class="spinner-border ms-auto" role="status" aria-hidden="true"></div>
</div>

ভাসছে

html

<div class="clearfix">
  <div class="spinner-border float-end" role="status">
    <span class="visually-hidden">Loading...</span>
  </div>
</div>

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

html

<div class="text-center">
  <div class="spinner-border" role="status">
    <span class="visually-hidden">Loading...</span>
  </div>
</div>

আকার

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

html

<div class="spinner-border spinner-border-sm" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow spinner-grow-sm" role="status">
  <span class="visually-hidden">Loading...</span>
</div>

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

html

<div class="spinner-border" style="width: 3rem; height: 3rem;" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow" style="width: 3rem; height: 3rem;" role="status">
  <span class="visually-hidden">Loading...</span>
</div>

বোতাম

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

html

<button class="btn btn-primary" type="button" disabled>
  <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
  <span class="visually-hidden">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>

html

<button class="btn btn-primary" type="button" disabled>
  <span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span>
  <span class="visually-hidden">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>

সিএসএস

ভেরিয়েবল

v5.2.0 এ যোগ করা হয়েছে

বুটস্ট্র্যাপের বিকশিত CSS ভেরিয়েবল পদ্ধতির অংশ হিসাবে, স্পিনাররা এখন স্থানীয় CSS ভেরিয়েবল ব্যবহার করে .spinner-borderএবং .spinner-growউন্নত রিয়েল-টাইম কাস্টমাইজেশনের জন্য। CSS ভেরিয়েবলের মান Sass এর মাধ্যমে সেট করা হয়, তাই Sass কাস্টমাইজেশন এখনও সমর্থিত।

বর্ডার স্পিনার ভেরিয়েবল:

  --#{$prefix}spinner-width: #{$spinner-width};
  --#{$prefix}spinner-height: #{$spinner-height};
  --#{$prefix}spinner-vertical-align: #{$spinner-vertical-align};
  --#{$prefix}spinner-border-width: #{$spinner-border-width};
  --#{$prefix}spinner-animation-speed: #{$spinner-animation-speed};
  --#{$prefix}spinner-animation-name: spinner-border;

ক্রমবর্ধমান স্পিনার ভেরিয়েবল:

  --#{$prefix}spinner-width: #{$spinner-width};
  --#{$prefix}spinner-height: #{$spinner-height};
  --#{$prefix}spinner-vertical-align: #{$spinner-vertical-align};
  --#{$prefix}spinner-animation-speed: #{$spinner-animation-speed};
  --#{$prefix}spinner-animation-name: spinner-grow;

উভয় স্পিনারদের জন্য, প্রয়োজন অনুসারে এই CSS ভেরিয়েবলের মান আপডেট করতে ছোট স্পিনার মডিফায়ার ক্লাস ব্যবহার করা হয়। উদাহরণস্বরূপ, .spinner-border-smক্লাস নিম্নলিখিত কাজ করে:

  --#{$prefix}spinner-width: #{$spinner-width-sm};
  --#{$prefix}spinner-height: #{$spinner-height-sm};
  --#{$prefix}spinner-border-width: #{$spinner-border-width-sm};

Sass ভেরিয়েবল

$spinner-width:           2rem;
$spinner-height:          $spinner-width;
$spinner-vertical-align:  -.125em;
$spinner-border-width:    .25em;
$spinner-animation-speed: .75s;

$spinner-width-sm:        1rem;
$spinner-height-sm:       $spinner-width-sm;
$spinner-border-width-sm: .2em;

কীফ্রেম

আমাদের স্পিনারদের জন্য CSS অ্যানিমেশন তৈরি করতে ব্যবহৃত হয়। এর মধ্যে অন্তর্ভুক্ত scss/_spinners.scss।

@keyframes spinner-border {
  to { transform: rotate(360deg) #{"/* rtl:ignore */"}; }
}

@keyframes spinner-grow {
  0% {
    transform: scale(0);
  }
  50% {
    opacity: 1;
    transform: none;
  }
}

স্পিনাররা

সম্পর্কিত

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

রং

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

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

মার্জিন

বসানো

ফ্লেক্স

ভাসছে

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

আকার

বোতাম

সিএসএস

ভেরিয়েবল

Sass ভেরিয়েবল

কীফ্রেম