(This article was written for Ionic 3, not 4)
So admittedly the title is a tiny bit of clickbait; however, the reason why people often search this exact phrase is because of the overly subtle gray loader/spinner icon and the fact that it is centered horizontally and vertically on your given splash screen, in Ionic. This can often lead to it being lost amongst your artwork and not adequately convey that background processing is occurring.
Thankfully there are plenty of tutorials out there that show you how to make a mock splash screen. This will help you make your own personal, custom splash screen. For the astute however, that is adding faux loading onto existing loading. If that is fine by you — here is the best one.
But if you want to minimise the amount of time a splash screen is shown and also indicate processing with a (IMO) clearly visible spinner, follow these simple steps:
Go into plugins then cordova-plugin-splashscreen then src and finally ios open up CDVSplashScreen.m this is the file we need to make a minor adjustment in.
Find the following line:
_activityView.center = CGPointMake(parentView.bounds.size.width / 2, parentView.bounds.size.height / 2);
and add some pixels to it — effectively pushing the spinner down by 100px; you can decide however many pixels you desire.
_activityView.center = CGPointMake(parentView.bounds.size.width / 2, parentView.bounds.size.height / 2 + 100);
Next, if you’d like to change the dull gray to a brighter white and slightly enlarge the spinner, you can do the following. Find this line:
UIActivityIndicatorViewStyle topActivityIndicatorStyle = UIActivityIndicatorViewStyleGray;
Change it to:
UIActivityIndicatorViewStyle topActivityIndicatorStyle = UIActivityIndicatorViewStyleWhiteLarge;
Done! Now, to apply these changes, you must first perform the following “apply those changes” commands.
First, ionic cordova platform remove ios and then ios cordova platform add ios — if you find this doesn’t work, first remove ios.json inside of your aforementioned plugins folder. Emulate or run on your device and you’ll notice the spinner is a bit more noticeable now.
Perhaps in future releases this will be customisable; as the Ionic team always strives for the best for their user base. But for now I hope I bettered someone’s day with this bandaid!
Comments are closed