본문 바로가기
Capgo - Capacitor 앱 빌드, 배포 및 업데이트 Capgo

@capgo/capacitor-native-loader

JavaScript 또는 네이티브 code에서 네이티브 애니메이션 로더, 투명 오버레이, Lottie 에셋, WebView 크기 조정 로딩 상태를 표시합니다.
시작하기 GitHub

Native 렌더링 경로

WebView에 비용이 많이 드는 반투명 효과 애니메이션을 요청하는 대신, UIKit 및 Android 오버레이 뷰로 로더를 표시합니다.

유연한 배치

로더를 전체 화면, 중앙, 가장자리 고정, 상단 Chrome 스타일, 또는 safe area를 고려한 inset으로 WebView 주변에 배치하세요.

내장 및 에셋 로더

네이티브 Siri 스타일, Siri v2 엣지, Chrome 상단 프로그레스, orbit, ring, pulse, dots, bars, wave, halo, 이미지 또는 Lottie 기반 로더를 사용하세요.

어디서든 호출 가능

JavaScript, Swift, Kotlin 또는 다른 native plugin에서 공개 native API를 통해 로더를 트리거할 수 있습니다.

플랫폼 지원

“플랫폼 지원” 섹션
플랫폼지원참고 사항
iOS지원네이티브
Android지원네이티브
웹아니요Capacitor.getPlatform()으로 보호하세요

언제 사용하나요?

“언제 사용하나요?” 섹션

@capgo/capacitor-native-loader WebView가 작업 중이거나, 크기가 조정되거나, 페이지를 이동하거나, 네이티브 레이어 뒤에 숨겨져 있을 때도 매끄럽고 투명하며 네이티브한 느낌을 유지해야 하는 로딩 상태를 위한 기능입니다.

다음과 같은 경우에 사용하세요:

  • 웹 콘텐츠 위에 표시되는 투명한 전체 화면 로딩 레이어
  • 콘텐츠를 가리는 대신 WebView 크기를 조정할 수 있는 Chrome 스타일의 상단 프로그레스 바
  • 앱의 상단, 하단, 좌측 또는 우측에 표시되는 엣지 로더
  • 네이티브 콘텐츠가 화면 일부를 차지하는 동안 크기가 조정된 WebView 주변에 표시되는 로더
  • 과도한 웹 렌더링, 라우트 변경 또는 초기 구동 중에도 끊김 없이 작동하는 네이티브 폴백 로더
  • JavaScript가 준비되기 전 다른 네이티브 플러그인에 의해 트리거되는 공유 로더
  • Lottie, 번들 이미지 또는 원격 에셋 기반의 로딩 애니메이션

데모 스타일

“데모 스타일” 섹션
스타일미리보기
SiriSiri 스타일 네이티브 로더 미리보기
Siri v2Siri v2 전체 화면 엣지 네이티브 로더 미리보기
Chrome 상단Chrome 스타일 상단 네이티브 로더 미리보기
RingRing native loader 프리뷰
DotsDots native loader 프리뷰
BarsBars native loader 프리뷰
WaveWave native loader 프리뷰
OrbitOrbit native loader 프리뷰
PulsePulse native loader 프리뷰
HaloHalo native loader 프리뷰
AroundAround-screen native loader 프리뷰
LottieLottie native loader 프리뷰
ImageImage native loader 프리뷰

핵심 API

“Core API” 섹션
  • show(options) loader를 표시하고 해당 정보를 반환합니다. id.
  • update(options) 오버레이를 제거하지 않고 기존 loader를 변경합니다.
  • setProgress(options) 로더의 진행 상태를 결정합니다.
  • hide(options) 로더 하나를 제거합니다.
  • hideAll(options) 모든 로더를 제거합니다.
  • setWebViewLayout(options) WebView/body의 크기를 조절하거나 인셋을 적용하여 네이티브 로더가 옆에 위치할 수 있게 합니다.
  • resetWebViewLayout(options?) 원래의 WebView/body 레이아웃으로 복구합니다.
  • getState() 현재 표시 중인 로더 ID를 반환합니다.
  • configure(options) 기본 스타일, 배치, 색상, 모션 및 동작을 설정합니다.

배치 모델

“Placement Model” 섹션

placement 네이티브 서피스가 나타날 위치를 제어합니다:

  • fullscreen 앱 전체를 덮으며, 선택적으로 반투명하게 설정할 수 있습니다.
  • center WebView 위에 컴팩트한 로더를 띄웁니다.
  • top, bottom, left, 그리고 right 로더를 세이프 에어리어(safe-area)를 인식하는 가장자리에 고정합니다.
  • chrome 전체 너비의 네이티브 상단 바 스타일을 사용하며 다음 항목과 잘 어울립니다: webView.mode: 'resize'.
  • around 화면 프레임을 따라 로더 애니메이션을 렌더링합니다.
  • custom 네이티브 플러그인 또는 스플릿 뷰(split-view) 워크플로우를 위한 명시적 프레임을 사용합니다.

사용 interactionMode: 'passThrough' 사용자가 WebView와 계속 상호작용할 수 있는 경우, block 로딩 중에 탭을 방지해야 하는 경우, 또는 loaderOnly 로더 표면만 터치를 받아야 하는 경우.

@capgo/capacitor-native-loader에서 계속하기

“@capgo/capacitor-native-loader에서 계속하기” 섹션

사용 중이라면 @capgo/capacitor-native-loader 네이티브 미디어 및 인터페이스 동작을 계획하려면, 이를 다음 항목과 연결하세요: 시작하기 구현 세부 사항은 다음을 참조하세요: @capgo/capacitor-native-navigation Native Chrome 및 WebView 레이아웃용, @capgo/capacitor-transitions 웹 라우트 모션용, @capgo/capacitor-native-loader 사용하기 튜토리얼에 사용합니다.