ספּיננערס

אָנווייַזן די לאָודינג שטאַט פון אַ קאָמפּאָנענט אָדער בלאַט מיט Bootstrap ספּיננערס, געבויט לעגאַמרע מיט HTML, CSS און קיין דזשאַוואַסקריפּט.

אויף דעם בלאַט

וועגן

באָאָטסטראַפּ "ספּיננערס" קענען זיין געוויינט צו ווייַזן די לאָודינג שטאַט אין דיין פּראַדזשעקס. זיי זענען געבויט בלויז מיט HTML און CSS, טייַטש איר טאָן ניט דאַרפֿן קיין דזשאַוואַסקריפּט צו שאַפֿן זיי. איר וועט, אָבער, דאַרפֿן עטלעכע מנהג דזשאַוואַסקריפּט צו באַשטימען זייער וויזאַביליטי. זייער אויסזען, אַליינמאַנט און סייזינג קענען זיין לייכט קאַסטאַמייזד מיט אונדזער אַמייזינג נוצן קלאסן.

פֿאַר אַקסעסאַביליטי צוועקן, יעדער לאָודער דאָ כולל 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>

אַליינמאַנט

ספּיננערס אין באָאָטסטראַפּ זענען געבויט מיט rems, currentColor, און display: inline-flex. דעם מיטל זיי קענען לייכט זיין רעסיזעד, ריקאָלאָרעד און געשווינד אַליינד.

גרענעץ

ניצן גרענעץ יוטילאַטיז ווי .m-5פֿאַר גרינג ספּייסינג.

HTML

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

פּלייסמאַנט

ניצן פלעקסבאָקס יוטילאַטיז , פלאָוט יוטילאַטיז אָדער טעקסט אַליינמאַנט יוטילאַטיז צו שטעלן ספּיננערז פּונקט ווו איר דאַרפֿן זיי אין קיין סיטואַציע.

פלעקס

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>

טעקסט align

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>

קנעפּלעך

ניצן ספּיננערס ין קנעפּלעך צו אָנווייַזן אַז אַן אַקציע איז דערווייַל פּראַסעסינג אָדער גענומען אָרט. איר קענט אויך ויסבייַטן דעם טעקסט פֿון די ספּיננער עלעמענט און נוצן קנעפּל טעקסט ווי דארף.

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

וועריאַבאַלז

צוגעגעבן אין וו5.2.0

ווי אַ טייל פון Bootstrap ס יוואַלווינג CSS וועריאַבאַלז צוגאַנג, ספּיננערס איצט נוצן היגע CSS וועריאַבאַלז אויף .spinner-borderאון .spinner-growפֿאַר ענכאַנסט פאַקטיש-צייט קוסטאָמיזאַטיאָן. וואַלועס פֿאַר די CSS וועריאַבאַלז זענען באַשטימט דורך סאַס, אַזוי סאַס קוסטאָמיזאַטיאָן איז נאָך געשטיצט אויך.

גרענעץ ספּינער וועריאַבאַלז:

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

סאָס וועריאַבאַלז

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