දඟ පන්දු යවන්නන්

සම්පුර්ණයෙන්ම HTML, CSS සහ ජාවාස්ක්‍රිප්ට් නොමැතිව ගොඩනගා ඇති Bootstrap Spinners සහිත සංරචකයක හෝ පිටුවක පූරණ තත්ත්වය දක්වන්න.

මෙම පිටුවේ

ගැන

Bootstrap "spinners" ඔබගේ ව්‍යාපෘති වල පූරණ තත්ත්වය පෙන්වීමට භාවිතා කළ හැක. ඒවා ගොඩනගා ඇත්තේ 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>

පෙළගැස්වීම

Bootstrap හි Spinners ගොඩනගා ඇත්තේ rems, currentColor, සහ display: inline-flex. මෙයින් අදහස් කරන්නේ ඒවා පහසුවෙන් ප්‍රමාණය වෙනස් කිරීමට, නැවත වර්ණ ගැන්වීමට සහ ඉක්මනින් පෙළගැස්වීමට හැකි බවයි.

ආන්තිකය

පහසු පරතරයක් සඳහා වැනි ආන්තික උපයෝගිතා භාවිතා කරන්න ..m-5

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

ස්ථානගත කිරීම

ඕනෑම අවස්ථාවක ඔබට අවශ්‍ය තැනට දඟ පන්දු යවන්නන් ස්ථානගත කිරීමට flexbox උපයෝගිතා , පාවෙන උපයෝගිතා හෝ පෙළ පෙළගැස්වීමේ උපයෝගිතා භාවිතා කරන්න.

Flex

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