Source

اسپنرز

بوٹسٹریپ اسپنرز کے ساتھ کسی جزو یا صفحہ کی لوڈنگ حالت کی نشاندہی کریں، مکمل طور پر HTML، CSS، اور بغیر جاوا اسکرپٹ کے ساتھ بنایا گیا ہے۔

کے بارے میں

بوٹسٹریپ "اسپنرز" کو آپ کے پروجیکٹس میں لوڈنگ کی حالت دکھانے کے لیے استعمال کیا جا سکتا ہے۔ وہ صرف HTML اور CSS کے ساتھ بنائے گئے ہیں، یعنی آپ کو انہیں بنانے کے لیے کسی JavaScript کی ضرورت نہیں ہے۔ تاہم، آپ کو ان کی مرئیت کو ٹوگل کرنے کے لیے کچھ حسب ضرورت جاوا اسکرپٹ کی ضرورت ہوگی۔ ان کی ظاہری شکل، صف بندی اور سائز کو ہماری حیرت انگیز یوٹیلیٹی کلاسز کے ساتھ آسانی سے اپنی مرضی کے مطابق بنایا جا سکتا ہے۔

رسائی کے مقاصد کے لیے، یہاں ہر لوڈر میں شامل ہے role="status"اور ایک نیسٹڈ <span class="sr-only">Loading...</span>۔

بارڈر اسپنر

ہلکے وزن والے لوڈنگ اشارے کے لیے بارڈر اسپنرز کا استعمال کریں۔

<div class="spinner-border" role="status">
  <span class="sr-only">Loading...</span>
</div>

رنگ

بارڈر اسپنر currentColorاس کے لیے استعمال کرتا ہے border-color، یعنی آپ ٹیکسٹ کلر یوٹیلیٹیز کے ساتھ رنگ کو اپنی مرضی کے مطابق بنا سکتے ہیں ۔ آپ معیاری اسپنر پر ہماری کسی بھی ٹیکسٹ کلر یوٹیلیٹی کو استعمال کر سکتے ہیں۔

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

border-colorیوٹیلیٹیز استعمال کیوں نہیں کرتے ؟ transparentہر بارڈر اسپنر کم از کم ایک سائیڈ کے لیے ایک بارڈر متعین کرتا ہے ، لہذا .border-{color}یوٹیلیٹیز اس کو اوور رائیڈ کر دیں گی۔

بڑھتا ہوا اسپنر

اگر آپ کو بارڈر اسپنر پسند نہیں ہے تو گرو اسپنر پر جائیں۔ اگرچہ یہ تکنیکی طور پر گھومتا نہیں ہے، یہ بار بار بڑھتا ہے!

<div class="spinner-grow" role="status">
  <span class="sr-only">Loading...</span>
</div>

ایک بار پھر، یہ اسپنر کے ساتھ بنایا گیا ہے ، لہذا آپ متن کے رنگ کی افادیتcurrentColor کے ساتھ اس کی ظاہری شکل کو آسانی سے تبدیل کر سکتے ہیں ۔ یہاں یہ نیلے رنگ میں ہے، اس کے ساتھ معاون متغیرات کے ساتھ۔

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

سیدھ

بوٹسٹریپ میں اسپنرز rems currentColor، اور display: inline-flex. اس کا مطلب ہے کہ ان کا سائز تبدیل کیا جا سکتا ہے، دوبارہ رنگ کیا جا سکتا ہے، اور جلدی سے منسلک کیا جا سکتا ہے۔

مارجن

آسان وقفہ کاری کے لیے مارجن یوٹیلیٹیز استعمال کریں ۔.m-5

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

جگہ کا تعین

فلیکس باکس یوٹیلیٹیز ، فلوٹ یوٹیلیٹیز ، یا ٹیکسٹ الائنمنٹ یوٹیلیٹیز استعمال کریں تاکہ اسپنرز کو بالکل وہی جگہ رکھیں جہاں آپ کو کسی بھی صورتحال میں ان کی ضرورت ہو۔

فلیکس

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

لوڈ ہو رہا ہے...

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

تیرتا ہے۔

<div class="clearfix">
  <div class="spinner-border float-right" role="status">
    <span class="sr-only">Loading...</span>
  </div>
</div>

متن سیدھ کریں۔

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

سائز

شامل کریں .spinner-border-smاور .spinner-grow-smایک چھوٹا اسپنر بنائیں جو تیزی سے دوسرے اجزاء میں استعمال کیا جا سکے۔

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

یا، ضرورت کے مطابق طول و عرض کو تبدیل کرنے کے لیے حسب ضرورت CSS یا ان لائن اسٹائل استعمال کریں۔

<div class="spinner-border" style="width: 3rem; height: 3rem;" role="status">
  <span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow" style="width: 3rem; height: 3rem;" role="status">
  <span class="sr-only">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="sr-only">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="sr-only">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>