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

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

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

பற்றி

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

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

மாறிகள்

v5.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};

சாஸ் மாறிகள்

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