முக்கிய உள்ளடக்கத்திற்கு செல்க டாக்ஸ் வழிசெலுத்தலுக்குச் செல்லவும்
in English

ஸ்பின்னர்கள்

HTML, CSS மற்றும் ஜாவாஸ்கிரிப்ட் இல்லாத பூட்ஸ்டார்ப் ஸ்பின்னர்களுடன் ஒரு கூறு அல்லது பக்கத்தின் ஏற்றுதல் நிலையைக் குறிப்பிடவும்.

இந்தப் பக்கத்தில்

பற்றி

பூட்ஸ்டார்ப் "ஸ்பின்னர்கள்" உங்கள் திட்டங்களில் ஏற்றப்படும் நிலையைக் காட்டப் பயன்படுத்தப்படலாம். அவை HTML மற்றும் CSS உடன் மட்டுமே உருவாக்கப்பட்டுள்ளன, அதாவது அவற்றை உருவாக்க உங்களுக்கு JavaScript எதுவும் தேவையில்லை. இருப்பினும், அவற்றின் தெரிவுநிலையை மாற்ற உங்களுக்கு சில தனிப்பயன் ஜாவாஸ்கிரிப்ட் தேவைப்படும். அவற்றின் தோற்றம், சீரமைப்பு மற்றும் அளவை எங்கள் அற்புதமான பயன்பாட்டு வகுப்புகள் மூலம் எளிதாக தனிப்பயனாக்கலாம்.

அணுகல்தன்மை நோக்கங்களுக்காக, இங்குள்ள ஒவ்வொரு லோடரும் உள்ளடங்கும் 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>

சீரமைப்பு

பூட்ஸ்டார்ப்பில் உள்ள ஸ்பின்னர்கள் rems, currentColor, மற்றும் 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>

பொத்தான்கள்

Use spinners within buttons to indicate an action is currently processing or taking place. You may also swap the text out of the spinner element and utilize button text as needed.

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

Sass

Variables

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

Keyframes

Used for creating the CSS animations for our spinners. Included in scss/_spinners.scss.

@keyframes spinner-border {
  to { transform: rotate(360deg) #{"/* rtl:ignore */"}; }
}

@keyframes spinner-grow {
  0% {
    transform: scale(0);
  }
  50% {
    opacity: 1;
    transform: none;
  }
}