Ask your WordPress questions! Pay money and get answers fast! Comodo Trusted Site Seal
Official PayPal Seal

display a preloader on the backend WordPress


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.


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 ?>
.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);

jQuery('<div class="loader_slh">loading</div>').prependTo('body');

jQuery(window).load(function() {

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:


Please find below two links, Hope this are useful (you can download) paid plugin @13)



Hariprasad Vijayan answers:


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.
<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(''); background-repeat: no-repeat; left: 50%; top: 100px;">&nbsp;</div>

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?