ネイティブな描画パス
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
「Core 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アプリ全体を覆います（オプションで半透明に設定可能）。centerWebViewの上にコンパクトなローダーをフローティング表示します。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-loader ネイティブメディアとインターフェースの挙動を計画するには、次と連携させてください スタートガイド 実装の詳細については、 @capgo/capacitor-native-navigation ChromeおよびWebViewのネイティブレイアウト用、 @capgo/capacitor-transitions Webルートのモーション用、および @capgo/capacitor-native-loader の使用方法 チュートリアル用。
