Ionic capacitor splash screen spinner

Asked
Active3 hr before
Viewed126 times

8 Answers

ionicspinnercapacitorsplashscreen
90%

ShowSplashScreenSpinner (boolean, defaults to true): Set to false to hide the splash screen spinner,,ShowSplashScreenSpinner (boolean, defaults to true): Set to false to hide the splash screen spinner

Example_snippet/controller/utility/_ionic.js/ ionic cordova plugin add @ioni. . .
ionic cordova plugin add @ionic - enterprise / splashscreen
load more v
88%

I’ve read that Capacitor handles splashscreen differently than Cordova, which first shows a grey window and then it is filled with the real splash screen, It can be programmatically hide calling splashScreen

Example_snippet/controller/utility/_ionic.js/ 2020-05-15 10:14:52.316673-040. . .
2020 - 05 - 15 10: 14: 52.316673 - 0400 App[28467: 1623497] WF: === Starting WebFilter logging
for process App
2020 - 05 - 15 10: 14: 52.316855 - 0400 App[28467: 1623497] WF: _userSettingsForUser: (null)
2020 - 05 - 15 10: 14: 52.317042 - 0400 App[28467: 1623497] WF: _WebFilterIsActive returning: NO
Loading network plugin
2020 - 05 - 15 10: 14: 52.370565 - 0400 App[28467: 1623497] CAPKeyboard: resize mode - native⚡️ Loading app at capacitor: //localhost...
   Reachable via WiFi
APP ACTIVE⚡️ WebView loaded⚡️[log] - Ionic Native: deviceready event fired after 54 ms⚡️[warn] - Native: tried calling StatusBar.styleDefault, but the StatusBar plugin is not installed.⚡️[warn] - Install the StatusBar plugin: 'ionic cordova plugin add cordova-plugin-statusbar'⚡️ [warn] - Native: tried calling SplashScreen.hide, but the SplashScreen plugin is not installed.⚡️[warn] - Install the SplashScreen plugin: 'ionic cordova plugin add cordova-plugin-splashscreen'⚡️
To Native - > App addListener 53029944
Step 2 continued with import { Component } from '@an. . .
import {
   Component
} from '@angular/core';
import {
   Plugins
} from '@capacitor/core';
@Component({
   selector: 'app-root',
   templateUrl: 'app.component.html',
   styleUrls: ['app.component.scss']
})
export class AppComponent {

   ngOnInit() {
      const {
         SplashScreen
      } = Plugins
      SplashScreen.hide();
   }
}
load more v
72%

You can customize the appearance of the spinner with the following configuration,,For Android, androidSpinnerStyle has the following options:,For iOS, iosSpinnerStyle has the following options:,If you want to show a spinner on top of the splash screen, set showSpinner to true in your Capacitor configuration file

Example_snippet/controller/utility/_ionic.js/ npm install @capacitor/splash-. . .
npm install @capacitor / splash - screen
npx cap sync
Step 2 continued with import { SplashScreen } from '. . .
import {
   SplashScreen
} from '@capacitor/splash-screen';

// Hide the splash (you should do this on app launch)
SplashScreen.hide();

// Show the splash for an indefinite amount of time:
SplashScreen.show({
   autoHide: false
});

// Show the splash for two seconds and then automatically hide it:
SplashScreen.show({
   showDuration: 2000,
   autoHide: true
});
Step 3 continued with { "plugins": { "SplashSc. . .
{
   "plugins": {
      "SplashScreen": {
         "launchShowDuration": 3000,
         "launchAutoHide": true,
         "backgroundColor": "#ffffffff",
         "androidSplashResourceName": "splash",
         "androidScaleType": "CENTER_CROP",
         "showSpinner": true,
         "androidSpinnerStyle": "large",
         "iosSpinnerStyle": "small",
         "spinnerColor": "#999999",
         "splashFullScreen": true,
         "splashImmersive": true,
         "layoutName": "launch_screen",
         "useDialog": true
      }
   }
}
Step 4 continued with /// <reference types="@capacit. . .
/// <reference types="@capacitor/splash-screen" />

import { CapacitorConfig } from '@capacitor/cli';

const config: CapacitorConfig = {
  plugins: {
    SplashScreen: {
      launchShowDuration: 3000,
      launchAutoHide: true,
      backgroundColor: "#ffffffff",
      androidSplashResourceName: "splash",
      androidScaleType: "CENTER_CROP",
      showSpinner: true,
      androidSpinnerStyle: "large",
      iosSpinnerStyle: "small",
      spinnerColor: "#999999",
      splashFullScreen: true,
      splashImmersive: true,
      layoutName: "launch_screen",
      useDialog: true,
    },
  },
};

export default config;
Step 5 continued with <style name="AppTheme.NoAction. . .
<style name="AppTheme.NoActionBarLaunch" parent="AppTheme.NoActionBar">
   <item name="android:background">@drawable/NAME</item>
</style>
Step 6 continued with show(options?: ShowOptions | u. . .
show(options?: ShowOptions | undefined) => Promise<void>
Step 7 continued with hide(options?: HideOptions | u. . .
hide(options?: HideOptions | undefined) => Promise<void>
load more v
65%

Example_snippet/controller/utility/_spinner.js/ { "plugins": { "SplashSc. . .
{
   "plugins": {
      "SplashScreen": {
         "showSpinner": true
      }
   }
}
75%

how can I move ionic-angular capacitor splash screen spinner at the bottom of the of the screen for android,Julian on How to remove flutter splash screen status bar’s color overlay WITHOUT making it Fullscreen?,Dhaval on Android App web based html5 Music Source used with cordova -plugin-music-controls2 but no controls or music info on lock screen,Michael on Qt Custom Android launcher black screen on HOME key

Example_snippet/controller/utility/_spinner.js/ "plugins": { "SplashScreen": {. . .
"plugins": {
   "SplashScreen": {
      "launchShowDuration": 7000,
      "showSpinner": true,
   }
40%

Based on a post here ionic-team/capacitor#3508 and the suggestion to post this as a feature request,,This moves it to the bottom center - the addition of the

Example_snippet/controller/utility/_spinner.js/ self.spinner.centerYAnchor.con. . .
self.spinner.centerYAnchor.constraint(equalTo: view!.centerYAnchor).isActive = true
load more v
22%

Example_snippet/controller/utility/_spinner.js/ { "plugins": { "SplashSc. . .
{
   "plugins": {
      "SplashScreen": {
         "showSpinner": true
      }
   }
}
60%

Meta Stack Overflow ,how can I move ionic-angular capacitor splash screen spinner at the bottom of the of the screen for android, Stack Overflow help chat ,Stack Overflow en español

Example_snippet/controller/utility/_spinner.js/ { "plugins": { "SplashSc. . .
{
   "plugins": {
      "SplashScreen": {
         "launchShowDuration": 3000,
         "launchAutoHide": true,
         "backgroundColor": "#ffffffff",
         "androidSplashResourceName": "splash",
         "androidScaleType": "CENTER_CROP",
         "androidSpinnerStyle": "large",
         "iosSpinnerStyle": "small",
         "spinnerColor": "#999999",
         "showSpinner": true,
         "splashFullScreen": true,
         "splashImmersive": true
      }
   }
}