__CAPGO_KEEP_0__
ネイティブレンダリング パス
UIKITとAndroidオーバーレイビューを表示する代わりに、WebViewにアニメーションを実行する費用の高い透過効果を要求しないようにします。
フレキシブルな配置
ローダーをフルスクリーン、中央、エッジにピン、Chromeスタイルのトップ、または安全エリアに認識されたインセットを含むWebView周辺に配置できます。
Siriスタイルのネイティブローダーを使用します。Siri v2エッジ、Chrome上の進行状況、オービット、リング、パルス、ドット、バー、ウェーブ、ハロ、画像、またはLottieベースのローダー。
どこでも呼び出せる
JavaScript、Swift、Kotlin、または他のネイティブプラグインからJavaScriptのAPIを使用してローダーをトリガーします。
使用する時
「使用する時」のセクション@capgo/capacitor-native-loader WebViewが忙しい、リサイズ中、ナビゲート中、またはネイティブサーフェイスの下に隠されているときに、スムーズ、透過、ネイティブのローディング状態を維持するために使用します。
使用する時は次の場合です:
- 透過的なフルスクリーンローディングレイヤーをWebコンテンツの上に表示します。
- Chromeスタイルのトップ進行状況バーを使用します。これはWebViewをリサイズするのではなく、コンテンツを覆うのではなく。
- アプリの上部、下部、左側、または右側にエッジローダーを使用します。
- リサイズされたWebViewの周りにローダーを使用します。ネイティブコンテンツは画面の一部を所有します。
- ネイティブフォールバックローダーを使用します。これは、重いWebレンダリング、ルート変更、または起動作業で生じる可能性のある問題に耐えます。
- JavaScriptが利用可能になる前に、他のネイティブ プラグインによってトリガーされる共有ローダー
- Lottie、バンドル画像、またはリモートアセットに基づくロードアニメーション
デモスタイル
「デモスタイル」| スタイル | プレビュー |
|---|---|
| Siri |  |
| Siri v2 |  |
| Chrome 上部 |  |
| リング |  |
| ドット |  |
| バー |  |
| ウェーブ |  |
| Orbit |  |
| Pulse |  |
| Halo |  |
| Around |  |
| Lottie |  |
| Image |  |
Core API
Section titled “Core API”show(options)ローダーを表示し、そのローダーを返します。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を の実装詳細について参照してください ネイティブのChromeとWebViewレイアウトについては、@__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-native-navigationを ネイティブのトランジションについては、@capgo/capacitor-transitionsを @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-native-loader @capgo/capacitor-native-loader ウェブルートの動き、そして @capgo/capacitor-native-loader を使用 チュートリアル用