İplikçiler

Tamamen HTML, CSS ile oluşturulmuş ve JavaScript içermeyen Bootstrap spinner'ları ile bir bileşenin veya sayfanın yükleme durumunu belirtin.

Bu sayfada

Hakkında

Önyükleme "döndürücüler", projelerinizde yükleme durumunu göstermek için kullanılabilir. Yalnızca HTML ve CSS ile oluşturulmuştur, yani bunları oluşturmak için herhangi bir JavaScript'e ihtiyacınız yoktur. Bununla birlikte, görünürlüklerini değiştirmek için bazı özel JavaScript'e ihtiyacınız olacak. Görünümleri, hizalamaları ve boyutlandırmaları, muhteşem faydalı sınıflarımızla kolayca özelleştirilebilir.

Erişilebilirlik amacıyla, buradaki her yükleyici role="status"bir iç içe <span class="visually-hidden">Loading...</span>.

Bu bileşenin animasyon efekti prefers-reduced-motionortam sorgusuna bağlıdır. Erişilebilirlik belgelerimizin azaltılmış hareket bölümüne bakın .

Sınır döndürücü

Hafif bir yükleme göstergesi için sınır döndürücüleri kullanın.

html

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

Renkler

Kenarlık döndürücü currentColorbunun için kullanır, yani rengi metin rengi yardımcı programlarıylaborder-color özelleştirebilirsiniz . Standart döndürücüde metin renk yardımcı programlarımızdan herhangi birini kullanabilirsiniz.

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>

Neden yardımcı programları kullanmıyorsunuz border-color? Her sınır döndürücü transparent, en az bir taraf için bir sınır belirtir, bu nedenle .border-{color}yardımcı programlar bunu geçersiz kılar.

Büyüyen spinner

Bir sınır döndürücüden hoşlanmıyorsanız, büyüme döndürücüye geçin. Teknik olarak dönmese de, tekrar tekrar büyüyor!

html

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

Bir kez daha, bu döndürücü ile oluşturulmuştur , böylece metin rengi yardımcı programlarıcurrentColor ile görünümünü kolayca değiştirebilirsiniz . Burada desteklenen varyantlarla birlikte mavi renktedir.

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>

hizalama

Bootstrap'teki Spinner'lar rems, currentColorve ile oluşturulmuştur display: inline-flex. Bu, kolayca yeniden boyutlandırılabileceği, yeniden renklendirilebileceği ve hızlı bir şekilde hizalanabileceği anlamına gelir.

marj

Kolay boşluk bırakma gibi kenar boşluğu yardımcı programlarını kullanın ..m-5

html

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

Atama

Döndürücüleri her durumda tam olarak ihtiyacınız olan yere yerleştirmek için flexbox yardımcı programlarını , kayan yardımcı programlarını veya metin hizalama yardımcı programlarını kullanın.

Esnek

html

<div class="d-flex justify-content-center">
  <div class="spinner-border" role="status">
    <span class="visually-hidden">Loading...</span>
  </div>
</div>

Yükleniyor...

html

<div class="d-flex align-items-center">
  <strong>Loading...</strong>
  <div class="spinner-border ms-auto" role="status" aria-hidden="true"></div>
</div>

yüzer

html

<div class="clearfix">
  <div class="spinner-border float-end" role="status">
    <span class="visually-hidden">Loading...</span>
  </div>
</div>

Metin hizalama

html

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

Boyut

Diğer bileşenlerde hızla kullanılabilecek daha küçük bir döndürücü ekleyin .spinner-border-smve yapın..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>

Veya boyutları gerektiği gibi değiştirmek için özel CSS veya satır içi stiller kullanın.

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>

Düğmeler

Bir eylemin şu anda işlenmekte veya gerçekleşmekte olduğunu belirtmek için düğmeler içindeki döndürücüleri kullanın. Ayrıca, döndürücü öğedeki metni değiştirebilir ve gerektiğinde düğme metnini kullanabilirsiniz.

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

Değişkenler

v5.2.0'da eklendi

Bootstrap'in gelişen CSS değişkenleri yaklaşımının bir parçası olarak, spinner'lar artık gelişmiş gerçek zamanlı özelleştirme için .spinner-borderyerel CSS değişkenlerini kullanıyor. .spinner-growCSS değişkenlerinin değerleri Sass aracılığıyla ayarlanır, bu nedenle Sass özelleştirmesi de desteklenmeye devam eder.

Sınır döndürücü değişkenler:

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

Büyüyen spinner değişkenleri:

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

Her iki spinner için, bu CSS değişkenlerinin değerlerini gerektiği gibi güncellemek için küçük spinner değiştirici sınıfları kullanılır. Örneğin, .spinner-border-smsınıf aşağıdakileri yapar:

  --#{$prefix}spinner-width: #{$spinner-width-sm};
  --#{$prefix}spinner-height: #{$spinner-height-sm};
  --#{$prefix}spinner-border-width: #{$spinner-border-width-sm};

Sas değişkenleri

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

Anahtar kareler

Döndürücülerimiz için CSS animasyonları oluşturmak için kullanılır. Dahil scss/_spinners.scss.

@keyframes spinner-border {
  to { transform: rotate(360deg) #{"/* rtl:ignore */"}; }
}

@keyframes spinner-grow {
  0% {
    transform: scale(0);
  }
  50% {
    opacity: 1;
    transform: none;
  }
}