ガイド
Capacitor で Native Loader を使う方法
@capgo/capacitor-native-loader の使用方法
@capgo/capacitor-native-loader ネイティブの iOS および Android ビューを通じてローディング状態を表示します。WebView がビジーな間もローダーをスムーズに保ちたい場合や、CSS による透過フルスクリーン効果の負荷が高い場合、または JavaScript の準備ができる前に別のネイティブプラグインでローディング UI を表示する必要がある場合に適しています。
インストール
npm install @capgo/capacitor-native-loader
npx cap sync
フルスクリーン Native Loader
import { NativeLoader } from '@capgo/capacitor-native-loader';
const { id } = await NativeLoader.show({
style: 'siri',
placement: 'fullscreen',
message: 'Preparing your session',
colors: ['#71f6ff', '#8b5cf6', '#ff4ecd', '#fff7ad'],
scrimColor: 'rgba(3, 7, 18, 0.42)',
interactionMode: 'block',
});
await initializeAppData();
await NativeLoader.hide({ id });
WebView リサイズ対応 Edge Loader
await NativeLoader.setWebViewLayout({
mode: 'inset',
insets: { top: 96 },
animated: true,
});
await NativeLoader.show({
style: 'wave',
placement: 'top',
message: 'Syncing changes',
interactionMode: 'passThrough',
});
ロード完了時に WebView を復元:
await NativeLoader.hideAll({ restoreWebView: true });
Chrome スタイルのトッププログレス
重い処理の間 CSS にアニメーションを任せず、WebView の上にブラウザ風のローディングバーを出したいときは Native トッププログレスローダーを使います。
const { id } = await NativeLoader.show({
style: 'chrome',
placement: 'top',
colors: ['#4285f4', '#34a853', '#fbbc05', '#ea4335'],
thickness: 4,
interactionMode: 'passThrough',
webView: {
mode: 'resize',
insets: { top: 12 },
restoreOnHide: true,
},
});
await NativeLoader.hide({ id, restoreWebView: true });
Siri V2 Edge Loader
使用するのは siri-v2 WebView を表示したまま、画面の端に色が流れる Native フルスクリーンローダーが使えます。
const { id } = await NativeLoader.show({
style: 'siri-v2',
placement: 'fullscreen',
colors: ['#71f6ff', '#8b5cf6', '#ff4ecd', '#fff7ad'],
thickness: 10,
scrimColor: 'rgba(3, 7, 18, 0.10)',
interactionMode: 'passThrough',
});
await NativeLoader.hide({ id });
Lottie Loader
await NativeLoader.show({
style: 'lottie',
placement: 'center',
asset: {
type: 'lottie',
source: 'loader.json',
loop: true,
},
});
Bundled assets はネットワークリクエストや JavaScript の初期化より前に使えるため、起動時のローダーに最適です。
Native プラグインコール
このプラグインは公開 Native API を提供しているため、他のプラグインからローダーの表示・非表示を直接制御できます。
Swift:
import CapgoCapacitorNativeLoader
let id = NativeLoader.shared.show(options: [
"style": "orbit",
"placement": "fullscreen",
"message": "Opening secure session"
])
NativeLoader.shared.hide(id: id)
Kotlin:
import app.capgo.nativeloader.NativeLoader
val id = NativeLoader.show(
activity = activity,
options = mapOf(
"style" to "orbit",
"placement" to "fullscreen",
"message" to "Loading profile",
),
webView = bridge.webView,
)
NativeLoader.hide(id)
便利なリンク
- GitHub: https://github.com/Cap-go/capacitor-native-loader/
- ドキュメント: /docs/plugins/native-loader/
@capgo/capacitor-native-loader の使用方法から次へ
以下を使用している場合： @capgo/capacitor-native-loader の使用方法 ネイティブのメディアやインターフェースの挙動を計画し、以下と連携させます： @capgo/capacitor-native-loader 実装の詳細については、 はじめに セットアップには、 @capgo/capacitor-native-navigation を使用 ネイティブの Chrome および WebView レイアウト用、および @capgo/capacitor-transitions を使用 WebView のルート遷移用。