display a preloader on the backend WordPress
- SOLVED
Hi, that's probably an easy one that I could figure out but I'am realy out of time.
Does any one have a snippet of code that woud display a preloader overlay on the backend untill the page is fully loaded (and the $(document).ready() finishes to do it's thing).
Basicaly I have some very heavy pages on the backend with a lot of javascript processing and it's taking quiet long to render (you can see the page half broken before everything gets into place.)
I would like to add an overlay with a loading message on every Backend admin page.
Thanks
Answers (4)
Sébastien | French WordpressDesigner answers:
add this code in you file functions.php
just change the url of the loader image
function loader_slh() {
global $post_type;
if($post_type=='post'){ //only for the posts ?>
?>
<style>
.loader_slh {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;
background: url('images/page-loader.gif') 50% 50% no-repeat rgb(249,249,249);
/*text-indent:-9999px;*/
}
</style>
<script>
jQuery('<div class="loader_slh">loading</div>').prependTo('body');
jQuery(window).load(function() {
jQuery(".loader_slh").fadeOut("slow");
})
</script>
<?
}
}
add_action('admin_footer', 'loader_slh');
l.pirondini comments:
hi Thanks for the quick help it works good as it is on my multi-site install.
Good work.
Arnav Joy answers:
do you want it in admin panel ?
in dashboard or in any other page , specif to your work or plugin ?
l.pirondini comments:
It's espacialy on the admin editing posts (no custom type just the regular post) that would need it, the most important is that the overlay desapeare once the $(document).ready finishes running all the code inside it (it has a bunc of .each() functions and ajax calls).
Firoja_Imtosupport answers:
Hi,
Please find below two links, Hope this are useful
http://w3lessons.info/2013/07/18/jquery-preloader/ (you can download)
http://codecanyon.net/item/pageloader-a-wp-preloader-with-content-slidein/full_screen_preview/6594364(wordpress paid plugin @13)
Thanks
Hariprasad Vijayan answers:
Hello,
Add this code to your functions.php
add_action( 'admin_head', 'dashboard_preloader' );
function dashboard_preloader()
{
?>
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('body').css('overflow', 'hidden');
});
jQuery(window).load(function() { // makes sure the whole site is loaded
jQuery('#status').fadeOut(); // will first fade out the loading animation
jQuery('#preloader').fadeOut('slow'); // will fade out the white DIV that covers the website.
jQuery('body').delay(350).css({'overflow':'visible'});
});
</script>
<div style="top: 0px; bottom: 0px; position: fixed; left: 0px; right: 0px; background-color: rgb(255, 255, 255); z-index: 9999;" id="preloader">
<div id="status" style="width: 200px; height: 200px; position: absolute; z-index: 9999; background-position: center center; margin: 100px 0px 0px -100px; background-image: url('http://tinkybell.fi/theme/Tinkybell/images/preloader.gif'); background-repeat: no-repeat; left: 50%; top: 100px;"> </div>
</div>
<?php
}
Let me know if you have trouble.
l.pirondini comments:
Hi, thanks for your Answer, unfortunately by the time I saw your answer I already had voted.
yours is working greate too, What's the difference between using admin_head or admin_footer hook? which one is most performant on that case?