ionic 5 custom splash screen (animated) | In just 5 minutes
HTML-код
- Опубликовано: 26 сен 2020
- Hello friends,
- Here we will create custom ionic animated splash screen in just 5 minutes.
- I am using latest ionic version ( ionic 5 ).
commands used:
💉ionic start
💉ionic serve
Get code from github:github.com/Gautammer/animated...
➡️Animation used from:- animista.net/play
About ionic framework :
Ionic Framework is an open source UI toolkit for building performant, high-quality mobile and desktop apps using web technologies - HTML, CSS, and JavaScript - with integrations for popular frameworks like Angular and React.
Ionic Framework focuses on the frontend UX and UI interaction of an app - UI controls, interactions, gestures, animations. It's easy to learn, and integrates with other libraries or frameworks, such as Angular, React, or Vue. Alternatively, it can be used standalone without any frontend framework using a simple script include. If you’d like to learn more about Ionic Framework before diving in, we created a video to walk you through the basics.
But this is a forced Splash Screen, not one showing while loading to improve UX. This defeats its purpose
Magnífico, justo lo que buscaba, corto y simple de implementar. Muchas gracias.
Saludos.
Nice work! Thanks!
good stuff , appreciate it
Thank you 😊
Good stuff. Keep it up.
Thank you 😊
Super !!!, it's working
Thank you so much
You are the best ❤️
Thank you ☺️
good job, it helped me, thx, greetings from chile
Glad it helped!
Great work! Thanks!
Thank you for supporting 🙏
awesome, its working
Thank you 🎉
Keep supporting
its very good and easy. nice video
Thank you 🎉
Keep supporting
Muchas gracias
can i make a splash screen on my existing project folder or do i need to make a new one
I need this just for android and ios and not for web app. Can you help?
Hi! Nice video
Thank you
Keep supporting
very nicee
Thanks 🙏🙏
How to solve when the back button is clicked, it doesn't return to the splash?
I have the same problem
@@juansanleg2669 solved with replaceUrl : true
@@NicholasAntonius where you put it?
Can you please create splash screen video with ionic - react from scratch. Thanks in advance :)
Sure, i am planning to upload vue and react tutorials..
It is not working when you build the android project from it. it always displays the default splash screen and then after it will display the customs splash screen.
do you know how to remove default splash screen
Yes remove splash screen plugin ,
Also remove splash values from xml files,
Then load our custom splash page
@@GautamMer not working can you show that this solution in not worked for me
Yes can you please show in a video
You need to search "@drawable/splash" and remove it and all other configs related to splash screen if any.
@@MuhammadWasifNaeem where can I find that
On clicking back button of phone the home page gets routed to splash component
Oh you found bug, let me fix and upload new version for that,
Thanks
@@GautamMer thanks for the reply 😀 I solved that bug by putting {replaceUrl : true } in routing of splash screen
Great you are awesome 🔥
@@GautamMer you are awesome thanks for suggesting this ausome trick for splash screen
@@UpdateWithAstro How did you manage to solve it, if you can help me please. I have the same problem. Thank you so much
Hello, can you show how replace capacitor splash screen
Yes i will do.. 🎊
@@GautamMer if video is uploaded, please share the link
Its not working the default screen always apear when i start app in my phone .
Can you show in a video who exactly remove it
Yes sure will do👍
@@GautamMer I have removed all splash images and xml after creating custom screen then getting error in build could you please share new video where i can chack all the things
You need to search "@drawable/splash" and remove it and all other configs related to splash screen if any.
it's working.. thank you so much..
can you create a login and registration page that can connect to php and mysql? thank you again
Hello,
Thanks you.
Yes i will create tutorial on php REST apis and ionic login registration
I can help you on that
ON actual device, it will always first show the original screen, and after loading the app, then it will show this screen, by this way your app will take double time to launch
Maybe you haven't removed all plugin code of splash plugin.
Please re- check all thing, if still issue than please tell me
You need to search "@drawable/splash" and remove it and all other configs related to splash screen if any.
@@MuhammadWasifNaeem Its working! thanks bro
@@MuhammadWasifNaeem Even after removing @drawable/splash from style.xml, I'm able to see the Ionic Splash screen followed by our custom splash screen
How to do this in react?
same logic
Damn, that is too much work and still stuck. I will just stick to my native Kotlin solutions. We never have these problems of changing endless libraries for a splash screen or a custom icon.
Can I use a css animation using Kotlin?
Nope
pou music
Thank you 😊
the problem with your animation is that you are putting the animation to the container and not to the image.