እሽክርክሪት
ሙሉ በሙሉ በኤችቲኤምኤል፣ በሲኤስኤስ እና በጃቫ ስክሪፕት የተሰራውን የቡትስትራፕ ስፒነሮች ያሉት የአንድ አካል ወይም ገጽ የመጫኛ ሁኔታ ያመልክቱ።
ስለ
በፕሮጀክቶችዎ ውስጥ የመጫኛ ሁኔታን ለማሳየት ቡትስትራክ "ስፒንነሮች" መጠቀም ይቻላል. እነሱ የተገነቡት በኤችቲኤምኤል እና በሲኤስኤስ ብቻ ነው፣ ይህ ማለት እነሱን ለመፍጠር ምንም ጃቫ ስክሪፕት አያስፈልገዎትም። ታይነታቸውን ለመቀየር ግን አንዳንድ ብጁ ጃቫ ስክሪፕት ያስፈልግዎታል። መልካቸው፣ አሰላለፍ እና መጠናቸው በአስደናቂው የፍጆታ ክፍሎቻችን በቀላሉ ሊበጁ ይችላሉ።
ለተደራሽነት ዓላማዎች፣ እያንዳንዱ ጫኚ እዚህ ያካትታል role="status"
እና ጎጆ <span class="visually-hidden">Loading...</span>
.
prefers-reduced-motion
በመገናኛ ብዙሃን ጥያቄ ላይ የተመሰረተ ነው. የእኛን የተደራሽነት ሰነድ የተቀነሰውን እንቅስቃሴ ክፍል ይመልከቱ
።
የድንበር ሽክርክሪት
ቀላል ክብደት ላለው የመጫኛ አመልካች የድንበር ስፒነሮችን ይጠቀሙ።
<div class="spinner-border" role="status">
<span class="visually-hidden">Loading...</span>
</div>
ቀለሞች
የድንበር ስፒነር ለሱ ይጠቀማል currentColor
፣ ይህም ማለት ቀለሙን በፅሁፍ ቀለም መገልገያዎችborder-color
ማበጀት ይችላሉ ። በመደበኛ ስፒነር ላይ ማንኛውንም የእኛን የጽሑፍ ቀለም መገልገያዎች መጠቀም ይችላሉ.
<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}
መገልገያዎች ያንን ይሽሩት።
በማደግ ላይ ያለው ሽክርክሪት
የድንበር እሽክርክሪት የማይፈልጉ ከሆነ፣ ወደ አድጋ ስፒነር ይቀይሩ። በቴክኒክ ባይሽከረከርም፣ በተደጋጋሚ ያድጋል!
<div class="spinner-grow" role="status">
<span class="visually-hidden">Loading...</span>
</div>
በድጋሚ, ይህ ሽክርክሪት የተገነባው በ currentColor
, ስለዚህ በቀላሉ በፅሁፍ መልክ መቀየር ይችላሉ መገልገያዎች . እዚህ በሰማያዊ ነው, ከሚደገፉት ልዩነቶች ጋር.
<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 ውስጥ ያሉት ስፒነሮች በ rem
s ፣፣ currentColor
እና display: inline-flex
. ይህ ማለት በቀላሉ መጠኑን መቀየር, ቀለም መቀየር እና በፍጥነት ሊጣጣሙ ይችላሉ.
ህዳግ
ለቀላል ክፍተት እንደ የኅዳግ መገልገያዎችን ይጠቀሙ ።.m-5
<div class="spinner-border m-5" role="status">
<span class="visually-hidden">Loading...</span>
</div>
አቀማመጥ
ፈትል ቦክስ መገልገያዎችን ፣ ተንሳፋፊ መገልገያዎችን ወይም የጽሑፍ አሰላለፍ መገልገያዎችን በማንኛውም ሁኔታ ውስጥ በትክክል በሚፈልጉበት ቦታ ለማስቀመጥ ይጠቀሙ ።
ፍሌክስ
<div class="d-flex justify-content-center">
<div class="spinner-border" role="status">
<span class="visually-hidden">Loading...</span>
</div>
</div>
<div class="d-flex align-items-center">
<strong>Loading...</strong>
<div class="spinner-border ms-auto" role="status" aria-hidden="true"></div>
</div>
ተንሳፋፊ
<div class="clearfix">
<div class="spinner-border float-end" role="status">
<span class="visually-hidden">Loading...</span>
</div>
</div>
የጽሑፍ አሰላለፍ
<div class="text-center">
<div class="spinner-border" role="status">
<span class="visually-hidden">Loading...</span>
</div>
</div>
መጠን
አክል .spinner-border-sm
እና .spinner-grow-sm
በፍጥነት በሌሎች ክፍሎች ውስጥ ጥቅም ላይ ሊውል የሚችል ትንሽ ስፒነር ለመስራት።
<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 ወይም የመስመር ውስጥ ቅጦችን ይጠቀሙ።
<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>
አዝራሮች
አንድ ድርጊት በአሁኑ ጊዜ እየተካሄደ ወይም እየተካሄደ መሆኑን ለማመልከት በአዝራሮች ውስጥ ስፒኖችን ይጠቀሙ። እንዲሁም ጽሑፉን ከስፒንነር ኤለመንት መለዋወጥ እና እንደ አስፈላጊነቱ የአዝራር ጽሁፍ መጠቀም ይችላሉ።
<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>
<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>
ሳስ
ተለዋዋጮች
$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;
የቁልፍ ፍሬሞች
ለስፖንሰሮቻችን የሲኤስኤስ እነማዎችን ለመፍጠር ይጠቅማል። ውስጥ ተካትቷል scss/_spinners.scss
።
@keyframes spinner-border {
to { transform: rotate(360deg) #{"/* rtl:ignore */"}; }
}
@keyframes spinner-grow {
0% {
transform: scale(0);
}
50% {
opacity: 1;
transform: none;
}
}