@capgo/capacitor-native-loader

iOSとAndroidのネイティブビューを使用して、WebViewの上、下、周囲、または代わりに、きれいにローダーをレンダリングします。

はじめましょう GitHub

ネイティブレンダリングパス

WebViewが高コストで透過的な効果をアニメーションするのではなく、UIKITとAndroidオーバーレイビューとしてローダーを表示します。

フレキシブルな配置

ローダーをフルスクリーン、中央、エッジにピン、Chromeスタイルのトップ、または安全エリアに意識したインセットを持つWebView周辺に配置します。

組み込みとアセットローダー

ネイティブのSiriスタイル、Siri v2エッジ、Chromeトップの進行、オービット、リング、パルス、ドット、バー、ウェーブ、ハロ、イメージ、またはLottieベースのローダーを使用します。

呼び出し可能な場所はどこでも

JavaScript、Swift、Kotlin、または他のネイティブプラグインから、パブリックネイティブ API を使用してローダーをトリガーします。

使用するタイミング

@capgo/capacitor-native-loader WebView が忙しい、リサイズ中、ナビゲート中、またはネイティブサーフェイスの下に隠されているときに、ロード状態が滑らかで透明でネイティブのままになるようにするために使用します。

使用する必要がある場合

ウェブコンテンツの上に透明なフルスクリーンローディングレイヤー
ウェブビューをリサイズする代わりにコンテンツを隠さない Chrome スタイルのトッププログレスバー
アプリの上部、下部、左側、または右側のエッジローダー
ネイティブコンテンツがウェブビューの一部を占有するときにリサイズされたウェブビュー周りのローダー
重度のウェブレンダリング、ルート変更、または起動作業のときに生存するネイティブフォールバックローダー
JavaScript が準備されていないときにトリガーされる共有ローダー
Lottie、バンドル画像、またはリモートアセットをバックアップしたロードアニメーション

デモスタイル

スタイル	プレビュー
Siri
Siri v2
Chrome の上部
Ring
Dots
Bars
Wave
オービット
パルス
ハロ
アラウンド
ロティ
イメージ

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 native surfaceの表示位置を制御します:

fullscreen 全画面にカバーし、透過可能です。
center WebViewの上にコンパクトなローダーを浮かべます。
top, bottom, left、および right 安全エリアに意識したエッジにローダーを固定します。
chrome スタイルは、native top barをフル幅で使用し、 webView.mode: 'resize'.
around 画面枠周りにローダーモーションをレンダリングします。
custom native-pluginまたはスプリットビューのワークフローで明示的なフレームを使用します。

使用する interactionMode: 'passThrough' ユーザーがWebViewとインタラクティブに保持できる場合 block ロード中にタップを防止したい場合、または loaderOnly タッチを受け取るのはローダー表面だけにすべきです。

@capgo/capacitor-native-loaderから続けてください。

あなたが@__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-native-loaderを使用している場合 @capgo/capacitor-native-loader native メディアとインターフェイスの動作を計画し、接続する Native Loaderの導入実装の詳細については、@__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-native-loaderを参照してください。 @capgo/capacitor-native-ナビゲーション native chrome と WebView のレイアウトのために @capgo/capacitor-transitions ウェブルートの動きについては、@__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-transitionsを参照してください。 Using @capgo/capacitor-native-loader {"targetLanguage":"Japanese","pagePath":"/ja/docs/plugins/native-loader/","protectedTokens":["Live Update","Cloudflare","Capacitor","GitHub","Capgo","code","API","SDK","CLI","npm","bun"],"items":[{"text":"@__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-native-loader"},{"text":"チュートリアルに使用します"},{"text":"ページを編集"}]}