@capgo/capacitor-native-loader

iOS 및 Android의 네이티브 뷰를 사용하여 WebView 위, 아래, 주변 또는 대신 렌더링하는 정교한 로더를 렌더링합니다.

시작하기 GitHub

네이티브 렌더링 경로

뷰웍뷰가 비싼 투명 효과를 애니메이션 하도록 요청하는 대신 UIKit와 안드로이드 오버레이 뷰로 로더를 표시하세요.

가변적인 위치

로더를 풀 스크린, 센터, 에지에 고정, 크롬 스타일의 위쪽, 또는 안전 영역에 인셋이 있는 웹뷰 주변에 표시하세요.

내장 로더와 자산 로더

Siri 스타일의 원생 네이티브 로더, Chrome 상단 진행, 원형, 링, 펄스, 점, 바, 웨이브, 할로, 이미지, 또는 Lottie 기반 로더를 사용하세요.

모든 곳에서 호출할 수 있습니다.

API를 통해 자바스크립트, 스위프트, 코틀린, 또는 다른 네이티브 플러그인에서 로더를 트리거하세요.

사용할 때

@capgo/capacitor-native-loader 다음 경우에 사용하세요:

웹 콘텐츠 위에 투명한 전체 화면 로딩 레이어

웹뷰 크기를 변경하는 대신 콘텐츠를 덮지 않는 Chrome 스타일의 상단 진행 바
앱의 상단, 하단, 왼쪽, 오른쪽에 로더를 표시하는 Edge 로더
네이티브 콘텐츠가 화면의 일부를 차지하는 동안 리사이즈된 웹뷰 주변에 로더
네이티브 로더가 중량의 웹 렌더링, 경로 변경, 또는 시작 작업과 같은 경우에 생존하는 네이티브 fallback 로더
native fallback loaders that survive heavy web rendering, route changes, or startup work
JavaScript가 준비되기 전에 다른 네이티브 플러그인이 트리거한 공유 로더
Lottie, 패키지 이미지 또는 리모트 애셋 기반 로딩 애니메이션

데모 스타일

스타일	미리보기
시리
Siri v2
Chrome 상단
Ring
점
바
Wave
Orbit
Pulse
Halo
Around
Lottie
이미지

코어 API

show(options) __CAPGO_KEEP_0__을 표시하고 반환합니다. id.
update(options) Overlay가 제거되지 않고 기존 로더를 변경합니다.
setProgress(options) 진행 상황을 업데이트하는 결정적 로더를 업데이트합니다.
hide(options) 하나의 로더를 제거합니다.
hideAll(options) 모든 로더를 제거합니다.
setWebViewLayout(options) 네이티브 로더가 옆에 있도록 WebView/바디 크기를 조절하거나 인셋합니다.
resetWebViewLayout(options?) 원래 WebView/바디 레이아웃을 복원합니다.
getState() 현재 표시 중인 로더 아이디를 반환합니다.
configure(options) 기본 스타일, 위치, 색상, 동작, 및 동작을 설정합니다.

위치 모델

placement 자연스러운 표면이 나타나는 위치를 제어합니다:

fullscreen 전체 앱을 덮을 수 있으며, 투명도 옵션을 선택할 수 있습니다.
center 웹뷰 위에 작은 로더를 떠다니게 합니다.
top, bottom, left, 그리고 right 안전 영역에 대한 고려를 포함한 가장자리에 로더를 고정합니다.
chrome 자연스러운 상단 바를 전체 너비로 사용하고, webView.mode: 'resize'.
around 화면 프레임 주변에 로더의 움직임을 렌더링합니다.
custom 자연 플러그인 또는 분할 뷰 워크플로우를 위한 명시적인 프레임을 사용합니다.

사용 interactionMode: 'passThrough' 사용자들이 웹뷰와 상호 작용할 수 있는 경우 block __CAPGO_KEEP_0__/__CAPGO_KEEP_1__-native-loader를 로드할 때 탭을 방지하거나 loaderOnly __CAPGO_KEEP_0__/__CAPGO_KEEP_1__-native-loader가 터치만 받을 수 있도록 하려면

capgo/capacitor-native-loader로 계속 진행하세요

__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-native-loader를 사용 중이라면 capgo/capacitor-native-loader __CAPGO_KEEP_0__/__CAPGO_KEEP_1__-native-loader를 사용하여 네이티브 미디어 및 인터페이스 동작을 계획하고, __CAPGO_KEEP_0__/__CAPGO_KEEP_1__-native-loader __CAPGO_KEEP_0__/__CAPGO_KEEP_1__-native-loader capgo/capacitor-native-loader __CAPGO_KEEP_0__/__CAPGO_KEEP_1__-native-loader capgo/capacitor-native-loader 웹 경로 동작, 그리고 Capacitor @capgo/capacitor-native-loader를 사용하여 튜토리얼을 위해