სპინერები

მიუთითეთ კომპონენტის ან გვერდის ჩატვირთვის მდგომარეობა Bootstrap სპინერებით, რომლებიც მთლიანად აგებულია HTML, CSS და JavaScript-ის გარეშე.

ამ გვერდზე

შესახებ

Bootstrap-ის „სპინერები“ შეიძლება გამოყენებულ იქნას თქვენი პროექტების ჩატვირთვის მდგომარეობის საჩვენებლად. ისინი აშენებულია მხოლოდ 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-ში აგებულია rems, currentColor, და display: inline-flex. ეს ნიშნავს, რომ მათ ადვილად შეუძლიათ ზომის შეცვლა, ფერის შეცვლა და სწრაფად გასწორება.

ზღვარი

გამოიყენეთ მინდვრის უტილიტები , როგორიცაა .m-5მარტივი ინტერვალი.

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

განთავსება

გამოიყენეთ flexbox-ის უტილიტები , float უტილიტები ან ტექსტის გასწორების პროგრამები, რათა მოათავსოთ სპინერები ზუსტად იქ, სადაც გჭირდებათ ნებისმიერ სიტუაციაში.

მოქნილი

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

ღილაკები

გამოიყენეთ სპინერები ღილაკებში, რათა მიუთითოთ მოქმედება ამჟამად მუშავდება ან მიმდინარეობს. თქვენ ასევე შეგიძლიათ შეცვალოთ ტექსტი spinner ელემენტიდან და გამოიყენოთ ღილაკის ტექსტი საჭიროებისამებრ.

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