স্পিনাৰ্ছ

এটা উপাদান বা পৃষ্ঠাৰ লোডিং অৱস্থা বুটষ্ট্ৰেপ স্পিনাৰসমূহৰ সৈতে দেখুৱাওক, সম্পূৰ্ণৰূপে HTML, CSS, আৰু কোনো JavaScript ৰ সৈতে নিৰ্মিত ।

এই পৃষ্ঠাত

বিষয়ে

আপোনাৰ প্ৰকল্পসমূহত লোডিং অৱস্থা দেখুৱাবলৈ বুটষ্ট্ৰেপ “স্পিনাৰসমূহ” ব্যৱহাৰ কৰিব পাৰি। কেৱল HTML আৰু CSS ৰ সৈতে নিৰ্মাণ কৰা হৈছে, অৰ্থাৎ ইয়াক সৃষ্টি কৰিবলৈ কোনো জাভাস্ক্রিপ্টৰ প্ৰয়োজন নাই। আপুনি, অৱশ্যে, সিহঁতৰ দৃশ্যমানতা টগল কৰিবলে কিছুমান স্বনিৰ্বাচিত জাভাস্ক্রিপ্টৰ প্ৰয়োজন হ'ব। আমাৰ আচৰিত ইউটিলিটি ক্লাছৰ সৈতে তেওঁলোকৰ ৰূপ, প্ৰান্তিককৰণ, আৰু আকাৰ সহজে কাষ্টমাইজ কৰিব পাৰি।

অভিগম্যতাৰ উদ্দেশ্যে, প্ৰতিটো লোডাৰে ইয়াত অন্তৰ্ভুক্ত role="status"কৰে আৰু এটা নেষ্ট কৰা <span class="visually-hidden">Loading...</span>।

এই উপাদানৰ এনিমেচন প্ৰভাৱ prefers-reduced-motionমাধ্যম প্ৰশ্নৰ ওপৰত নিৰ্ভৰশীল। আমাৰ অভিগম্যতা নথিপত্ৰৰ হ্ৰাস কৰা গতি অংশ চাওক ।

সীমা স্পিনাৰ

এটা লঘু লোডিং সূচকৰ বাবে সীমা স্পিনাৰসমূহ ব্যৱহাৰ কৰক।

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>

প্লেচমেণ্ট

flexbox সঁজুলিসমূহ , float সঁজুলিসমূহ , বা লিখনী প্ৰান্তিককৰণ সঁজুলিসমূহ ব্যৱহাৰ কৰক স্পিনাৰসমূহক যিকোনো পৰিস্থিতিত আপুনি সিহতৰ প্ৰয়োজন হোৱা ঠাইত স্থাপন কৰিবলে।

নমনীয়

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 ত যোগ কৰা হৈছে

Bootstrap ৰ বিকাশশীল CSS চলকসমূহ পদ্ধতিৰ অংশ হিচাপে, স্পিনাৰসমূহে এতিয়া উন্নত বাস্তৱ-সময় স্বনিৰ্বাচনত .spinner-borderআৰু তাৰ বাবে স্থানীয় CSS চলকসমূহ ব্যৱহাৰ কৰে। .spinner-growCSS চলকসমূহৰ বাবে মানসমূহ 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;
  }
}