ספינרים

ציין את מצב הטעינה של רכיב או דף עם ספינרים של 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 , כלי עזר צפים או כלי עזר ליישור טקסט כדי למקם ספינרים בדיוק היכן שאתה צריך אותם בכל מצב.

לְהַגמִישׁ

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>

כפתורים

השתמש בספינרים בתוך לחצנים כדי לציין פעולה כרגע מעובדת או מתרחשת. אתה יכול גם להחליף את הטקסט מתוך אלמנט הספינר ולהשתמש בטקסט הכפתור לפי הצורך.

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

כחלק מגישת משתני ה-CSS המתפתחת של Bootstrap, הספינרים משתמשים כעת במשתני CSS מקומיים על .spinner-borderולמען .spinner-growהתאמה אישית משופרת בזמן אמת. הערכים עבור משתני ה-CSS נקבעים באמצעות Sass, כך שגם התאמה אישית של Sass עדיין נתמכת.

משתני ספינר גבול:

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