in English

ספּיננערס

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

וועגן

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

פֿאַר אַקסעסאַביליטי צוועקן, יעדער לאָודער דאָ כולל role="status"און אַ נעסטעד <span class="sr-only">Loading...</span>.

די אַנאַמיישאַן ווירקונג פון דעם קאָמפּאָנענט איז אָפענגיק אויף די prefers-reduced-motionמידיאַ אָנפֿרעג. זען די רידוסט באַוועגונג אָפּטיילונג פון אונדזער אַקסעסאַביליטי דאַקיומענטיישאַן .

גרענעץ ספּיננער

ניצן די גרענעץ ספּיננערס פֿאַר אַ לייטווייט לאָודינג גראדן.

לאָדן...
<div class="spinner-border" role="status">
  <span class="sr-only">Loading...</span>
</div>

קאָלאָרס

דער גרענעץ ספּיננער ניצט currentColorפֿאַר זייַן border-color, טייַטש איר קענען קאַסטאַמייז די קאָליר מיט טעקסט קאָליר יוטילאַטיז . איר קענט נוצן קיין פון אונדזער טעקסט קאָליר יוטילאַטיז אויף די נאָרמאַל ספּיננער.

לאָדן...
לאָדן...
לאָדן...
לאָדן...
לאָדן...
לאָדן...
לאָדן...
לאָדן...
<div class="spinner-border text-primary" role="status">
  <span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-secondary" role="status">
  <span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-success" role="status">
  <span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-danger" role="status">
  <span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-warning" role="status">
  <span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-info" role="status">
  <span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-light" role="status">
  <span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-dark" role="status">
  <span class="sr-only">Loading...</span>
</div>
פארוואס נישט נוצן border-colorיוטילאַטיז? יעדער גרענעץ ספּיננער ספּעציפיצירט אַ transparentגרענעץ פֿאַר בייַ מינדסטער איין זייַט, אַזוי .border-{color}יוטילאַטיז וואָלט אָווועררייד אַז.

גראָוינג ספּיננער

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

לאָדן...
<div class="spinner-grow" role="status">
  <span class="sr-only">Loading...</span>
</div>

ווידער, דעם ספּיננער איז געבויט מיט currentColor, אַזוי איר קענען לייכט טוישן זיין אויסזען מיט טעקסט קאָליר יוטילאַטיז . דאָ עס איז אין בלוי, צוזאמען מיט די שטיצט וועריאַנץ.

לאָדן...
לאָדן...
לאָדן...
לאָדן...
לאָדן...
לאָדן...
לאָדן...
לאָדן...
<div class="spinner-grow text-primary" role="status">
  <span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-secondary" role="status">
  <span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-success" role="status">
  <span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-danger" role="status">
  <span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-warning" role="status">
  <span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-info" role="status">
  <span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-light" role="status">
  <span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-dark" role="status">
  <span class="sr-only">Loading...</span>
</div>

אַליינמאַנט

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

גרענעץ

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

לאָדן...
<div class="spinner-border m-5" role="status">
  <span class="sr-only">Loading...</span>
</div>

פּלייסמאַנט

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

פלעקס

לאָדן...
<div class="d-flex justify-content-center">
  <div class="spinner-border" role="status">
    <span class="sr-only">Loading...</span>
  </div>
</div>
לאָדן...
<div class="d-flex align-items-center">
  <strong>Loading...</strong>
  <div class="spinner-border ml-auto" role="status" aria-hidden="true"></div>
</div>

פלאַץ

לאָדן...
<div class="clearfix">
  <div class="spinner-border float-right" role="status">
    <span class="sr-only">Loading...</span>
  </div>
</div>

טעקסט align

לאָדן...
<div class="text-center">
  <div class="spinner-border" role="status">
    <span class="sr-only">Loading...</span>
  </div>
</div>

גרייס

לייג .spinner-border-smאון .spinner-grow-smצו מאַכן אַ קלענערער ספּיננער וואָס קענען געשווינד זיין געוויינט אין אנדערע קאַמפּאָונאַנץ.

לאָדן...
לאָדן...
<div class="spinner-border spinner-border-sm" role="status">
  <span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow spinner-grow-sm" role="status">
  <span class="sr-only">Loading...</span>
</div>

אָדער, נוצן מנהג CSS אָדער ינלינע סטיילז צו טוישן די דימענשאַנז ווי דארף.

לאָדן...
לאָדן...
<div class="spinner-border" style="width: 3rem; height: 3rem;" role="status">
  <span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow" style="width: 3rem; height: 3rem;" role="status">
  <span class="sr-only">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="sr-only">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="sr-only">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>