Spinners

스피너는 프로젝트의 로딩 상태를 표시하기 위해 사용할 수 있습니다. 이것은 HTML과 CSS로 만들어져 있기 때문에 JavaScript를 필요로 하지 않습니다.
그러나 가시성을 바꾸기 위해 몇 가지의 사용자 정의 JavaScript가 필요합니다. 이러한 외형, 배치, 크기는 유틸리티 클래스를 통해 간단하게 재정의할 수 있습니다.

Types

Border

Loading

Loading

<div class="spinner_item_wrap"> <div class="spinner_item border_type01" role="status"></div> <p class="blind">Loading</p> </div> <div class="spinner_item_wrap"> <div class="spinner_item border_type02" role="status"></div> <p class="blind">Loading</p> </div>
소스 코드가 복사되었습니다.
Grow

Loading

Loading

<div class="spinner_item_wrap"> <div class="spinner_item grow_type01" role="status"></div> <p class="blind">Loading</p> </div> <div class="spinner_item_wrap"> <div class="spinner_item grow_type02" role="status"></div> <p class="blind">Loading</p> </div>
소스 코드가 복사되었습니다.
Dot

Loading

Loading

Loading

<div class="spinner_item_wrap"> <div class="spinner_item dot_type01" role="status"></div> <p class="blind">Loading</p> </div> <div class="spinner_item_wrap"> <div class="spinner_item dot_type02" role="status"></div> <p class="blind">Loading</p> </div> <div class="spinner_item_wrap"> <div class="spinner_item dot_type03" role="status"></div> <p class="blind">Loading</p> </div>
소스 코드가 복사되었습니다.

Button Spinners

버튼 중 스피너를 사용하여 액션이 현재 처리 중이거나 실행 중임을 나타냅니다.

<button class="btn btn_md btn_border"> <div class="spinner_item_wrap"> <div class="spinner_item border_type01" role="status"></div> <p class="blind">Loading</p> </div> </button> <button class="btn btn_md btn_border"> <div class="spinner_item_wrap row"> <div class="spinner_item border_type01" role="status"></div> <p>Loading</p> </div> </button> <button class="btn btn_md btn_border btn_disabled"> <div class="spinner_item_wrap row"> <div class="spinner_item border_type01" role="status"></div> <p>Loading</p> </div> </button>
소스 코드가 복사되었습니다.

Spinners

Types

Border

Grow

Dot

Button Spinners