رفتن به محتوای اصلی به پیمایش اسناد بروید
in English

اسپینرها

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

در باره

از "اسپینر" های بوت استرپ می توان برای نشان دادن وضعیت بارگذاری در پروژه های شما استفاده کرد. آنها فقط با HTML و CSS ساخته شده اند، به این معنی که برای ایجاد آنها نیازی به جاوا اسکریپت ندارید. با این حال، برای تغییر قابلیت مشاهده آنها به جاوا اسکریپت سفارشی نیاز دارید. ظاهر، تراز و اندازه آنها را می توان به راحتی با کلاس های ابزار شگفت انگیز ما سفارشی کرد.

برای اهداف دسترسی، هر بارکننده در اینجا شامل role="status"و یک تودرتو <span class="visually-hidden">Loading...</span>می شود.

prefers-reduced-motionاثر انیمیشن این مؤلفه به پرسش رسانه بستگی دارد . بخش حرکت کاهش یافته اسناد دسترسی ما را ببینید.

چرخنده مرزی

از اسپینرهای حاشیه برای نشانگر بارگیری سبک استفاده کنید.

بارگذاری...
<div class="spinner-border" role="status">
  <span class="visually-hidden">Loading...</span>
</div>

رنگ ها

حاشیه چرخان currentColorبرای خود استفاده می کند border-color، به این معنی که می توانید رنگ را با ابزارهای رنگ متن سفارشی کنید . شما می توانید از هر یک از ابزارهای رنگ متن ما در اسپینر استاندارد استفاده کنید.

بارگذاری...
بارگذاری...
بارگذاری...
بارگذاری...
بارگذاری...
بارگذاری...
بارگذاری...
بارگذاری...
<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}کاربردی آن را لغو می کنند.

اسپینر در حال رشد

اگر به اسپینر مرزی علاقه ندارید، به اسپینر رشد بروید. در حالی که از نظر فنی نمی چرخد، بارها و بارها رشد می کند!

بارگذاری...
<div class="spinner-grow" role="status">
  <span class="visually-hidden">Loading...</span>
</div>

بار دیگر، این اسپینر با ساخته شده است currentColor، بنابراین می توانید به راحتی ظاهر آن را با ابزارهای رنگ متن تغییر دهید . در اینجا به رنگ آبی همراه با انواع پشتیبانی شده است.

بارگذاری...
بارگذاری...
بارگذاری...
بارگذاری...
بارگذاری...
بارگذاری...
بارگذاری...
بارگذاری...
<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>

هم ترازی

اسپینرها در بوت استرپ با remcurrentColorو و ساخته می display: inline-flexشوند. این بدان معناست که می توان آنها را به راحتی تغییر اندازه داد، رنگ آنها را تغییر داد و به سرعت آنها را تراز کرد.

لبه

از ابزارهای حاشیه مانند .m-5فاصله گذاری آسان استفاده کنید.

بارگذاری...
<div class="spinner-border m-5" role="status">
  <span class="visually-hidden">Loading...</span>
</div>

تعیین سطح

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

فلکس

بارگذاری...
<div class="d-flex justify-content-center">
  <div class="spinner-border" role="status">
    <span class="visually-hidden">Loading...</span>
  </div>
</div>
بارگذاری...
<div class="d-flex align-items-center">
  <strong>Loading...</strong>
  <div class="spinner-border ms-auto" role="status" aria-hidden="true"></div>
</div>

شناورها

بارگذاری...
<div class="clearfix">
  <div class="spinner-border float-end" role="status">
    <span class="visually-hidden">Loading...</span>
  </div>
</div>

تراز کردن متن

بارگذاری...
<div class="text-center">
  <div class="spinner-border" role="status">
    <span class="visually-hidden">Loading...</span>
  </div>
</div>

اندازه

اضافه کنید .spinner-border-smو .spinner-grow-smیک اسپینر کوچکتر بسازید که می تواند به سرعت در اجزای دیگر استفاده شود.

بارگذاری...
بارگذاری...
<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 سفارشی یا سبک های درون خطی برای تغییر ابعاد در صورت نیاز استفاده کنید.

بارگذاری...
بارگذاری...
<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>

دکمه ها

از اسپینرهای درون دکمه ها برای نشان دادن یک عمل در حال پردازش یا انجام استفاده کنید. همچنین می‌توانید متن را از عنصر چرخان تغییر دهید و در صورت نیاز از متن دکمه استفاده کنید.

<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>
<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>

ساس

متغیرها

$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;
  }
}