გადადით მთავარ შინაარსზე დოკუმენტების ნავიგაციაზე გადასვლა
Check
in English

სპინერები

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

შესახებ

Bootstrap-ის „სპინერები“ შეიძლება გამოყენებულ იქნას თქვენი პროექტების ჩატვირთვის მდგომარეობის საჩვენებლად. ისინი აშენებულია მხოლოდ HTML და CSS-ით, რაც ნიშნავს, რომ თქვენ არ გჭირდებათ JavaScript მათი შესაქმნელად. ამასთან, დაგჭირდებათ რამდენიმე მორგებული 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>

გასწორება

სპინერები Bootstrap-ში აგებულია rems, currentColor, და display: inline-flex. ეს ნიშნავს, რომ მათ ადვილად შეუძლიათ ზომის შეცვლა, ფერის შეცვლა და სწრაფად გასწორება.

ზღვარი

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

Ჩატვირთვა...
html
<div class="spinner-border m-5" role="status">
  <span class="visually-hidden">Loading...</span>
</div>

განთავსება

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

მოქნილი

Ჩატვირთვა...
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>

ღილაკები

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

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

როგორც Bootstrap-ის განვითარებადი CSS ცვლადების მიდგომის ნაწილი, სპინერები ახლა იყენებენ ადგილობრივ CSS ცვლადებს რეალურ დროში გაძლიერებული პერსონალიზაციისთვის .spinner-border. .spinner-growCSS ცვლადების მნიშვნელობები დაყენებულია Sass-ის საშუალებით, ამიტომ Sass-ის პერსონალიზაცია კვლავ მხარდაჭერილია.

Border Spinner ცვლადები:

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

Sass ცვლადები

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