സ്പിന്നർമാർ

ബൂട്ട്‌സ്‌ട്രാപ്പ് സ്‌പിന്നറുകൾ ഉള്ള ഒരു ഘടകത്തിന്റെ അല്ലെങ്കിൽ പേജിന്റെ ലോഡിംഗ് നില സൂചിപ്പിക്കുക, പൂർണ്ണമായും HTML, CSS, കൂടാതെ JavaScript ഇല്ല.

ഈ പേജിൽ

കുറിച്ച്

നിങ്ങളുടെ പ്രോജക്റ്റുകളിൽ ലോഡിംഗ് നില കാണിക്കാൻ ബൂട്ട്സ്ട്രാപ്പ് "സ്പിന്നറുകൾ" ഉപയോഗിക്കാം. അവ HTML, CSS എന്നിവ ഉപയോഗിച്ച് മാത്രമാണ് നിർമ്മിച്ചിരിക്കുന്നത്, അതായത് അവ സൃഷ്ടിക്കാൻ നിങ്ങൾക്ക് JavaScript ആവശ്യമില്ല. എന്നിരുന്നാലും, അവയുടെ ദൃശ്യപരത ടോഗിൾ ചെയ്യുന്നതിന് നിങ്ങൾക്ക് ചില ഇഷ്‌ടാനുസൃത 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>

ബട്ടണുകൾ

ഒരു പ്രവർത്തനം നിലവിൽ പ്രോസസ്സ് ചെയ്യുകയോ നടക്കുകയോ ചെയ്യുന്നുവെന്ന് സൂചിപ്പിക്കാൻ ബട്ടണുകൾക്കുള്ളിൽ സ്പിന്നറുകൾ ഉപയോഗിക്കുക. നിങ്ങൾക്ക് സ്പിന്നർ എലമെന്റിൽ നിന്ന് ടെക്‌സ്‌റ്റ് സ്വാപ്പ് ചെയ്‌ത് ആവശ്യാനുസരണം ബട്ടൺ ടെക്‌സ്‌റ്റ് ഉപയോഗിക്കാം.

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