스피너
JavaScript 없이 HTML, CSS로 완전히 구축된 Bootstrap 스피너를 사용하여 구성 요소 또는 페이지의 로드 상태를 나타냅니다.
에 대한
부트스트랩 "스피너"를 사용하여 프로젝트의 로드 상태를 표시할 수 있습니다. 그것들은 HTML과 CSS로만 만들어졌습니다. 즉, 그것들을 만드는 데 JavaScript가 필요하지 않습니다. 그러나 가시성을 전환하려면 일부 사용자 정의 JavaScript가 필요합니다. 외관, 정렬 및 크기는 당사의 놀라운 유틸리티 클래스로 쉽게 사용자 정의할 수 있습니다.
접근성을 위해 여기의 각 로더에는 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>
조정
부트스트랩의 스피너는 rem
s, currentColor
, 및 display: inline-flex
. 즉, 쉽게 크기를 조정하고, 색상을 변경하고, 빠르게 정렬할 수 있습니다.
여유
쉬운 간격 과 같은 여백 유틸리티 를 사용하십시오 ..m-5
<div class="spinner-border m-5" role="status">
<span class="visually-hidden">Loading...</span>
</div>
놓기
flexbox 유틸리티 , float 유틸리티 또는 텍스트 정렬 유틸리티를 사용하여 어떤 상황에서도 스피너를 필요한 위치에 정확히 배치하십시오.
몸을 풀다
<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;
키프레임
스피너에 대한 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;
}
}