Changing Loading Animation

Martence — Thu, 12 Feb 2015 13:18:39 +0000

Hi there –

I was wondering;
is it possible to change the Loading animation?
(The 9 blocks – animation).

1. How is this animation constructed and where can I add a different one?
2. Will changing the animation affect the loading time?

Looking forward to your explanation.

Kindly,
Laurens.

Reply To: Changing Loading Animation

IshYoBoy — Mon, 16 Feb 2015 15:00:02 +0000

Hey Laurens,

The loader animation html code is output in the “header.php” file and then the animation is controlled via CSS only.

The HTML block is:

<?php if ( ishyoboy_use_site_preloader() ) { ?>
    <script type="text/javascript">
	    // Output the preloader HTML
        document.write('<div id="ish-site-preloader-holder" class="ish-site-preloader-holder">' +
	    '<div class="ish-site-preloader-content">' +
	    '<div class="ish-site-preloader"><div class="ish-square" ></div><div class="ish-square"></div><div class="ish-square last"></div><div class="ish-square clear"></div><div class="ish-square"></div><div class="ish-square last"></div><div class="ish-square clear"></div><div class="ish-square "></div><div class="ish-square last"></div></div>' +
	    '<div class="ish-site-preloader-text"><?php _e( 'Loading...', 'ishyoboy'); ?></div>' +
	    '</div>' +
	    '</div>');

	    // Manually remove preloader window after 5 seconds in case JS Error blocks the onload event to be carried out succesfully
        setTimeout( function(){
	        document.getElementById("ish-site-preloader-holder").style.display = 'none';
        } , 5000 );
</script>
<?php } ?>

if ( ishyoboy_use_site_preloader() ) { ?>

} ?>

The CSS which drives the animation is located in the SCSS file:
wp-content/themes/no8/assets/frontend/css/sass/_preloader.scss

So if you change the HTML structure you can only add the necessary CSS via Child theme To control it.

The change will not influence the loading time as the loader is automatically removed once the page is fully loaded. You can also disable it from theme options if you do not need it. The page will be shown earlier, but some parts will still be loading.

Cheers

A 5 star rating is always a great motivation for us if you are happy with our theme or support!
Themeforest | MojoMarketplace | Creative Market

Support ForumChanging Loading Animation – Support Forum

Changing Loading Animation

Reply To: Changing Loading Animation