اسپینرها

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

اسپینرها در بوت استرپ
مثال پایه
بارگذاری...
<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-info" 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-danger" 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>
اسپینر در حال رشد

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

بارگذاری...
<div class="spinner-grow" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
رنگ های در حال رشد
بارگذاری...
بارگذاری...
بارگذاری...
بارگذاری...
بارگذاری...
بارگذاری...
بارگذاری...
بارگذاری...
<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-info" 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-danger" 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>
اندازه

اضافه کنید .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-border" 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>
<div class="spinner-grow" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
دکمه ها
<button class="btn btn-primary me-1" 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>

ممنون که با فالکون خلق کردید

نسخه 3.4.0

تنظیمات

سبک سفارشی خود را تنظیم کنید

طرح رنگ بندی

حالت رنگ مناسب را برای برنامه خود انتخاب کنید.


RTL حالت

جهت زبان خود را تغییر دهید

RTL راهنما

چیدمان سیال

سیستم چیدمان کانتینر را تغییر دهید

راهنما سیال

موقعیت ناوبری

یک سیستم ناوبری مناسب برای برنامه وب خود انتخاب کنید


سبک نوار ناوبری عمودی

برای نوار ناوبری عمودی خود بین سبک ها جابه جا شوید

دیدن راهنما

چیزی که میبینی را دوست داری؟

برای خرید قالب فالکون از راستچین اقدام کنید.

خرید
شخصی سازی