ionic capacitor splash screen spinner

To add a splash screen spinner in Ionic Capacitor, you can follow these steps:

1. First, locate the resources folder in your Ionic project's root directory. If it doesn't exist, you can create it manually.

2. Inside the resources folder, create a new folder called android if you are targeting Android, or ios if you are targeting iOS.

3. Within the appropriate platform folder (android or ios), create another folder called splash.

4. Now, you need to add your splash screen image to the splash folder. Make sure the image file is in the correct format and resolution for your target platform. For example, for Android, you can use a 9-patch image format, while for iOS, you can use a PNG file with specific dimensions.

5. After adding the splash screen image, you need to configure the splash screen preferences in the capacitor.config.json file. Open this file located in the root directory of your Ionic project.

6. Inside the plugins section of the capacitor.config.json file, add the following configuration for the splash screen:

"plugins": {
  "SplashScreen": {
    "launchShowDuration": 0,
    "launchAutoHide": false,
    "backgroundColor": "#ffffff",
    "androidSplashResourceName": "splash",
    "showSpinner": true,
    "spinnerColor": "#000000"
  }
}

Make sure to adjust the values according to your requirements. The showSpinner property is set to true to display the spinner, and the spinnerColor property sets the color of the spinner.

1. Save the capacitor.config.json file.

2. Finally, run the command npx cap sync to synchronize the splash screen configuration with your native project.

Now, when you launch your Ionic app, the splash screen with the spinner should be displayed according to the configuration you set.