Render a custom loading animation image at the center of the window screen on portal

snehachoudhary
Kilo Contributor

I want to display the loading image at the center of the screen to give a visual of page loading just like youtube buffering image which loads in the middle of the active screen.

Also, this needs to applied globally for all portal pages.

7 REPLIES 7

michaeljames12
Giga Contributor

Absolutely! To achieve a loading image at the center of the screen globally across all portal pages, you can use CSS to position a loading spinner or image in the center of the viewport. Applying a global loading indicator is typically done by utilizing JavaScript or a similar scripting language to handle the loading process across various pages seamlessly. Additionally, I've implemented a similar approach on my site by displaying the vnapkpro animation during the loading phase. It enhances the user experience and provides a visual cue, much like the YouTube buffering image you mentioned. If you'd like, I can share the code snippets or guide you through the process. Let me know if you have any questions or if there's anything specific you'd like assistance with!

michaeljames12
Giga Contributor

Absolutely! To achieve a loading image at the center of the screen globally across all portal pages, you can use CSS to position a loading spinner or image in the center of the viewport. Applying a global loading indicator is typically done by utilizing JavaScript or a similar scripting language to handle the loading process across various pages seamlessly. Additionally, I've implemented a similar approach on my site by displaying the vnapkpro animation during the loading phase. It enhances the user experience and provides a visual cue, much like the YouTube buffering image you mentioned. If you'd like, I can share the code snippets or guide you through the process. Let me know if you have any questions or if there's anything specific you'd like assistance with!

MilanorK
Kilo Contributor

To render a custom loading animation image at the center of the window screen on a portal, you can use CSS properties like position: absolute; with top: 50%; and left: 50%; along with transform: translate(-50%, -50%); to center the image, and then apply CSS animations or GIF animations as seen in popular webtoons like "Solo Leveling" or anime like "Naruto Shippuden" during loading screens on different webtoon platforms like https://newtoki.co/.