자연 렌더링 경로
UIKit 및 Android overlay 뷰를 사용하여 비싼 투명 효과를 애니메이션하는 WebView에 요청하는 대신 로더를 UIKit과 Android overlay 뷰로 표시하세요.
flexible한 위치
로더를 웹뷰 주변에 safe-area-aware insets를 사용하여 화면의 중앙, 화면의 가장자리에 고정, Chrome-style으로 위쪽, 또는 웹뷰 주변에 표시하세요.
내장 및 자산 로더
자연 Siri-style, Siri v2 edge, Chrome top progress, orbit, ring, pulse, dots, bars, wave, halo, image, 또는 Lottie-based 로더를 사용하세요.
호출 가능한 모든 곳
자바스크립트, 스위프트, 코틀린, 또는 다른 네이티브 플러그인으로부터 API을 통해 로더를 트리거합니다.
@capgo/capacitor-native-loader 사용할 때:
웹 콘텐츠 위에 투명한 풀 스크린 로딩 레이어
- Chrome-style 상단 진행 표시줄을 사용하여 WebView를 리사이즈하는 대신 콘텐츠를 가리는
- 앱의 상단, 하단, 왼쪽, 오른쪽에 로더를 표시
- 네이티브 콘텐츠가 화면의 일부를 소유하는 동안 리사이즈된 WebView 주변의 로더
- 네이티브 콘텐츠가 화면의 일부를 소유하는 동안 리사이즈된 WebView 주변의 로더
- 중요한 웹 렌더링, 경로 변경, 또는 시작 작업과 같은 상황에서 살아남는 네이티브 폴백 로더
- 다른 네이티브 플러그인이 자바스크립트가 준비되기 전에 트리거하는 공유 로더
- 로티, 이미지, 또는 리모트 애셋 백드 로딩 애니메이션
Demo Styles
Demo Styles 섹션| Style | 미리보기 |
|---|---|
| Siri |  |
| Siri v2 |  |
| __CAPGO_KEEP_0__ |  |
| __CAPGO_KEEP_0__ |  |
| __CAPGO_KEEP_0__ |  |
| __CAPGO_KEEP_0__ |  |
| __CAPGO_KEEP_0__ |  |
| __CAPGO_KEEP_0__ |  |
| Pulse |  |
| Halo |  |
| Around |  |
| Lottie |  |
| 이미지 |  |
Core API
API의 핵심 섹션show(options)로더를 표시하고 반환한다.id.update(options)기존 로더를 변경하여 overlay를 제거하지 않는다.setProgress(options)진행 상황을 업데이트한다.hide(options)로더 하나를 제거한다.hideAll(options)모든 로더를 제거한다.setWebViewLayout(options)웹뷰/바디 크기를 조절하거나 insets하여 native 로더가 옆에 위치할 수 있도록 한다.resetWebViewLayout(options?)원래 웹뷰/바디 레이아웃을 복원한다.getState()현재 표시 중인 로더 id를 반환한다.configure(options)기본 스타일, 위치, 색상, 동작, 및 동작을 설정한다.
위치 모델
위치 모델 섹션placement native surface 위치를 결정합니다:
fullscreen전체 앱을 덮고 optionally 투명합니다.center웹뷰 위에 compact 로더를 떠올립니다.top,bottom,left안전한 영역에 대한 edge 에 로더를 고정합니다.right전체 화면에 native top bar를 사용하고 잘 어울리는 style을 사용합니다.chrome화면 프레임 주변에 로더 동작을 렌더링합니다.webView.mode: 'resize'.aroundnative-plugin 또는 split-view 워크플로우에 대한 explicit 프레임을 사용합니다.custom사용하세요.
사용자가 웹뷰와 상호 작용할 수 있는 경우: interactionMode: 'passThrough' 터치 입력을 방지해야 하는 경우: block 로더 표면만 터치 입력을 받을 수 있는 경우: loaderOnly __CAPGO_KEEP_0__
capgo/capacitor-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 __CAPGO_KEEP_0__/__CAPGO_KEEP_1__-native-loader capgo/capacitor-native-loader Capgo의 튜토리얼을 위해.