@capgo/capacitor-native-loader

JavaScriptまたはネイティブのcodeから、ネイティブのアニメーションローダー、透過オーバーレイ、Lottieアセット、WebViewのリサイズを伴うローディング状態を表示します

今すぐ始める GitHub

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

WebViewに負荷の高い半透明エフェクトのアニメーションをさせるのではなく、UIKitやAndroidのオーバーレイビューとしてローダーを表示します。

柔軟な配置設定

フルスクリーン、中央、エッジ固定、Chromeスタイルの上部表示、またはセーフエリアを考慮したWebView周囲への配置が可能です。

組み込みおよびアセットローダー

ネイティブなSiriスタイル、Siri v2エッジ、Chrome風プログレス、オービット、リング、パルス、ドット、バー、ウェーブ、ヘイロー、画像、またはLottieベースのローダーを使用できます。

どこからでも呼び出し可能

JavaScript、Swift、Kotlin、または公開されているネイティブ API を介して、他のネイティブプラグインからローダーを起動できます。

プラットフォーム対応

プラットフォーム	サポート	備考
iOS	はい	ネイティブ
Android	はい	ネイティブ
Web	いいえ	Capacitor.getPlatform() でガードする

使用する場面

@capgo/capacitor-native-loader WebViewが処理中、リサイズ中、遷移中、またはネイティブレイヤーの背後に隠れている間でも、スムーズで半透明かつネイティブな状態を維持するためのローディング機能です。

以下のようなケースで使用します：

Webコンテンツの上に重ねる、透明なフルスクリーンのローディングレイヤー
コンテンツを覆うのではなく、WebView自体のサイズを変更できるChromeスタイルの上部プログレスバー
アプリの上下左右に配置するエッジローダー
ネイティブコンテンツが画面の一部を占有している間の、リサイズされたWebView周囲のローダー
重いWebレンダリング、ルート変更、または起動処理が発生しても維持されるネイティブのフォールバックローダー
JavaScriptの準備ができる前に、他のネイティブプラグインによってトリガーされる共有ローダー
Lottie、バンドルされた画像、またはリモートアセットを使用したローディングアニメーション

デモスタイル

スタイル	プレビュー
Siri
Siri v2
Chromeトップ
Ring
Dots
Bars
Wave
Orbit
Pulse
Halo
Around
Lottie
Image

コア API

show(options) ローダーを表示し、その id.
update(options) オーバーレイを破棄せずに既存のローダーを変更します。
setProgress(options) アップデートによるローダーの進捗を決定します。
hide(options) ローダーを1つ削除します。
hideAll(options) すべてのローダーを削除します。
setWebViewLayout(options) WebView/bodyのサイズ変更やインセットを行い、ネイティブローダーを横に配置できるようにします。
resetWebViewLayout(options?) WebView/bodyの元のレイアウトを復元します。
getState() 現在表示されているローダーのIDを返します。
configure(options) デフォルトのスタイル、配置、色、モーション、および動作を設定します。

配置モデル

placement ネイティブサーフェスの表示位置を制御します：

fullscreen アプリ全体を覆います（オプションで半透明に設定可能）。
center WebViewの上にコンパクトなローダーをフローティング表示します。
top, bottom, left、および right セーフエリアに対応したエッジにローダーを固定します。
chrome フル幅のネイティブトップバーを使用し、〜と相性が良いスタイルです。 webView.mode: 'resize'.
around 画面のフレームに沿ってローダーのアニメーションを描画します。
custom ネイティブプラグインやスプリットビューのワークフローに明示的なフレームを使用します。

使用するのは interactionMode: 'passThrough' ユーザーがWebViewとのインタラクションを継続できる場合、 block ロード中にタップを禁止すべき場合、または loaderOnly ローダーの表面のみがタッチを受け取るようにする場合。

@capgo/capacitor-native-loader からさらに学ぶ

以下を使用している場合： @capgo/capacitor-native-loader ネイティブのメディアとインターフェースの挙動を計画するには、これを次と連携させてください：はじめに実装の詳細については、 @capgo/capacitor-native-navigation ChromeおよびWebViewのネイティブレイアウト用、 @capgo/capacitor-transitions Webルートのモーション用、および @capgo/capacitor-native-loader チュートリアル用。