ネイティブレンダーパス
UIKitとAndroidオーバーレイビューとしてローダーを表示するのではなく、WebViewにアニメーションする高コストの透過効果を依頼するのではなく
フレキシブルな配置
ローダーをフルスクリーン、中央、エッジにピン、Chromeスタイルのトップ、またはWebViewの周囲に安全エリア認識のインセットで表示する
組み込まれたローダーとアセットローダー
ネイティブのSiriスタイル、Siri v2エッジ、Chromeトッププログレス、オービット、リング、パルス、ドット、バー、ウェーブ、ハロ、イメージ、またはLottieベースのローダーを使用する
呼び出し可能な場所
Trigger loaders from JavaScript, Swift, Kotlin, or other native plugins through the public native API.
__CAPGO_KEEP_0__
使用するとき@capgo/capacitor-native-loader WebViewが忙しい、リサイズ中、ナビゲート中、またはネイティブの表面の下に隠されているときに、滑らかで透明でネイティブのロード状態を維持するために使用します。
使用する必要があるときは:
- ウェブコンテンツの上に透明なフルスクリーンロードレイヤー
- リサイズ可能なWebViewをカバーするのではなく、Chromeスタイルのトッププログレスバー
- アプリの左、右、上、下のエッジローダー
- ネイティブコンテンツが画面の一部を占める場合にリサイズ可能なWebView周りのローダー
- 重いウェブレンダリング、ルート変更、または起動作業の間に生存するネイティブのフォールバックローダー
- JavaScriptが準備されていないときにトリガーされる共有ローダー
- Lottie、バンドル画像、またはリモートアセットバックのロードアニメーション
Demo Styles
Section titled “Demo Styles”| Style | Preview |
|---|---|
| Siri |  |
| Siri v2 |  |
| Chrome top |  |
| Ring |  |
| Dots |  |
| Bars |  |
| Wave |  |
| Orbit |  |
| Pulse |  |
| Halo |  |
| Around |  |
| Lottie |  |
| Image |  |
Core API
Core APIのセクションshow(options)ローダーを表示し、そのIDを返します。id.update(options)既存のローダーを変更するだけです。オーバーレイは破棄されません。setProgress(options)決定的なローダーの進行状況を更新します。hide(options)ローダーを1つ削除します。hideAll(options)すべてのローダーを削除します。setWebViewLayout(options)ネイティブローダーが横に並ぶように、WebView/ボディのサイズを変更またはインセットします。resetWebViewLayout(options?)元のWebView/ボディのレイアウトを復元します。getState()現在表示されているローダーのIDを返します。configure(options)デフォルトのスタイル、配置、色、動き、動作を設定します。
配置モデル
「配置モデル」のセクションplacement ネイティブサーフェスの出現位置を制御します:
fullscreen全画面をカバーするオプションで透過可能。centerウェブビュー上にコンパクトなローダーを浮かべる。top,bottom,left安全エリアに意識したエッジにローダーを固定する。rightネイティブのトップバーをフル幅で使用し、chrome画面枠周りにローダーモーションをレンダリングする。webView.mode: 'resize'.aroundネイティブプラグインまたはスプリットビューのワークフロー用に明示的なフレームを使用する。custom使用する
ユーザーがウェブビューと同時に操作できる場合 interactionMode: 'passThrough' タップを防止する場合、または block ローダーサーフェイスのみがタップを受け取る場合 loaderOnly から続ける
@capgo/capacitor-native-loader
「@capgo/capacitor-native-loader」から続けてくださいCapgoを使用している場合 @capgo/capacitor-native-loader ネイティブメディアとインターフェイスの動作を計画する場合、@__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-native-loaderと接続してください 実装の詳細については「 」を参照してください @capgo/capacitor-native-navigation 」を参照してください @capgo/capacitor-transitions 」を参照してください Using @capgo/capacitor-native-loader 」を参照してください