Animated Splash screen with html and css

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.

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

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

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.

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

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.

hello, I already failed him as Josh says and it works, great for the blog; but I have a problem, the passage from one screen to the other, that is to close the splash is delayed and the requirement is that it be the gif once by pressing the application icon, help me please