Customized screen loader for better user experience

Hello everyone, Is there a way to customize the existing screen loading effect. Till what range can we do it. I have a few requirements to change the loading effect at different places in the application. Splash screen loader: When the platform loads – It generally loads displaying the application logo and the loading screen.      Indeterminant Time indicator: When a page takes less than 5 seconds time to load       Determinant time indicator: When a page takes more than 10 seconds to load     Skeleton screen: Data get displayed once the background of the page is loaded in a greyed color.       Have you ever, come across customizing the loading animation at different places in the application? Please let me know you have any suggestions on this.
2 answers

Hi Laxman Mylapilli,
you check your scss file/CSS file
.mx-progress class name you add any gif like Splash screen loader! 
until the data gets to display 
and have look on the bootstrap preloaders


Hi Narendra Jaganathan, I used the default class for loader in my custom scss file and used the splash loader gif file, the default loader was being displayed instead of the splash screen loader. The code in scss file: (I have created a new folder named Style inside theme->web->style ) .mx-progress { width: 70px; height: 10px; margin: auto; background: url("splash.gif") !important; } (And the splash.gif file is stored in theme->web). So why is the splash loader getting displayed?.

Splash.gif location and Style folder:

custom.scss (location):

I have imported the custom.scss file in main.scss.