اسپینرها

وضعیت بارگذاری یک کامپوننت یا صفحه را با اسپینرهای Bootstrap که کاملاً با HTML، CSS و بدون جاوا اسکریپت ساخته شده است، نشان دهید.

در این صفحه

در باره

از "اسپینر" های بوت استرپ می توان برای نشان دادن وضعیت بارگذاری در پروژه های شما استفاده کرد. آنها فقط با 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>

تعیین سطح

از ابزارهای فلکس باکس ، ابزارهای شناور یا ابزارهای تراز متن استفاده کنید تا اسپینرها را در هر شرایطی دقیقاً در جایی که به آنها نیاز دارید قرار دهید.

فلکس

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>

CSS

متغیرها

اضافه شده در نسخه 5.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;
  }
}