Animated Splash screen with html and css

#1

Hello World! (Classic :wink: )
So i’m making a small app for my self and was wondering how to change the original splash screen images with an html and css code with animate.css library ;).

If anyone knows please reply a solution i appreciate your help :slight_smile: .

Best regards,
Khaled.

#2

This is impossible on Ionic.
Splashscreen must be an image file. You can implement an html modal at the beginning but there’s no way to completely remove a real image splash screen.
I wasted weeks on this issue.

1 Like
#3

But you could fake it:
set your splash screen to the first frame of your animation

#4

Yes… that’s the only way.

For instance, make a full blue splash screen without anything on it.
and then put blue background html modal with animations.
Then users will not notice you’re using two splash screens.
But this still comes with challenges because sometimes white blank splash screen pops up and there’s a built-in gray blank splash screen which can’t be removed.

#5

As the others have said, splash screens must be an image file so you have to “fake” it. I have a tutorial on doing that: https://www.joshmorony.com/creating-an-animated-splash-screen-in-ionic/

2 Likes
#6

Good day Josh

Thank you for the wonderful article. I am trying to o the same, but with Ionic 4.0. I am new to the framework, and it seems that there are some remarkable changes from how it worked in 3.0. Do you perhaps have any advice on how to get it working in the newer version? I would be very grateful for your help.