How to show Page Loading div until the page has finished loading

Question

I have a section on our website that loads quite slowly as it s doing some intensive calls  Any idea how I can get a div to say something similar to  quot loading quot  to show while the page prepares itself and then vanish when everything is ready

User · Answer

Default the contents to display none and then have an event handler that sets it to display block or similar after it s fully loaded  Then have a div that s set to display block with  Loading  in it  and set it to display none in the same event handler as before

User · Answer

Well  this largely depends on how you re loading the elements needed in the  intensive call   my initial thought is that you re doing those loads via ajax   If that s the case  then you could use the  beforeSend  option and make an ajax call like this     ajax     type   GET     url   some php     data   name John amp location Boston      beforeSend  function xhr              lt ---- use this option here          select element you want to load into   html  Loading               success  function msg            select element you want to load into   html msg             EDIT I see  in that case  using one of the  display block   display none  options above in conjunction with   document  ready      from jQuery is probably the way to go  The   document  ready   function waits for the entire document structure to be loaded before executing  but it doesn t wait for all media to load   You d do something like this     document  ready  function          table with slow data   show         div loading image or text   hide

User · Answer

This will be in synchronisation with an api call  When the api call is triggered  the loader is shown  When the api call is succesful  the loader is removed  This can be used for either page load or during an api call       ajax       type   GET       url  url      async  true      dataType   json       beforeSend  function  xhr               lt div class  loader  id  searching-loader  gt  lt  div gt    appendTo   table-playlist-section             html  body   animate    scrollTop    document  height      100              success  function  jsonOptions              searching-loader   remove                                  CSS   loader     border  2px solid  f3f3f3    border-radius  50     border-top  2px solid  3498db    width  30px    height  30px    margin  auto    -webkit-animation  spin 2s linear infinite     Safari      animation  spin 2s linear infinite    margin-top  35px    margin-bottom  -35px        Safari     -webkit-keyframes spin     0    -webkit-transform  rotate 0deg       100    -webkit-transform  rotate 360deg         keyframes spin     0    transform  rotate 0deg       100    transform  rotate 360deg

User · Answer

Here s the jQuery I ended up using  which monitors all ajax start stop  so you don t need to add it to each ajax call     document  ajaxStart function            loading   removeClass  hide       ajaxStop function            loading   addClass  hide          CSS for the loading container  amp  content  mostly from mehyaa s answer   as well as a hide class    loading      width  100      height  100      top  0px     left  0px     position  fixed     display  block     opacity  0 7     background-color   fff     z-index  99     text-align  center      loading-content     position  absolute    top  50     left  50     text-align  center    z-index  100      hide    display  none      HTML    lt div id  loading  class  hide  gt     lt div id  loading-content  gt      Loading       lt  div gt   lt  div gt

User · Answer

x000D   x000D  window onload   function    document getElementById  loading   style display    none    x000D   loading  width  100  height  100  top  0px left  0px position  fixed display  block  z-index  99  x000D   x000D   loading-image  position  absolute top  40  left  45  z-index  100   x000D   lt div id  loading  gt  x000D   lt img id  loading-image  src  img loading gif  alt  Loading       gt  x000D   lt  div gt    x000D   x000D   x000D    Page loading image with simplest fadeout effect created in JS

User · Answer

I ve needed this and after some research I came up with this  jQuery needed    First  right after the  lt body gt  tag add this    lt div id  loading  gt     lt img id  loading-image  src  images ajax-loader gif  alt  Loading       gt   lt  div gt    Then add the style class for the div and image to your CSS    loading     width  100     height  100     top  0    left  0    position  fixed    display  block    opacity  0 7    background-color   fff    z-index  99    text-align  center      loading-image     position  absolute    top  100px    left  240px    z-index  100      Then  add this javascript to your page  preferably at the end of your page  before your closing  lt  body gt  tag  of course     lt script gt      window  load function             loading   hide           lt  script gt    Finally  adjust the position of the loading image and the background-colour of the loading div with the style class   This is it  should work just fine  But of course you have to have an ajax-loader gif somewhere  Freebies here   Right-click   Save Image As

User · Answer

This script will add a div that covers the entire window as the page loads  It will show a CSS-only loading spinner automatically  It will wait until the window  not the document  finishes loading  then it will wait an optional extra few seconds        Works with jQuery 3  it has a new window load event      No image needed but it s easy to add one     Change the delay for more branding or instructions     Only dependency is jQuery      CSS loader code from https   projects lukehaas me css-loaders   x000D   x000D       x000D     body   append   lt div style    id  loadingDiv  gt  lt div class  loader  gt Loading    lt  div gt  lt  div gt     x000D    window  on  load   function    x000D    setTimeout removeLoader  2000     wait for page load PLUS two seconds  x000D      x000D  function removeLoader    x000D           loadingDiv    fadeOut 500  function     x000D           fadeOut complete  Remove the loading div x000D             loadingDiv    remove      makes page more lightweight  x000D          x000D    x000D           loader  x000D           loader after   x000D              border-radius  50   x000D              width  10em  x000D              height  10em  x000D            x000D           loader               x000D              margin  60px auto  x000D              font-size  10px  x000D              position  relative  x000D              text-indent  -9999em  x000D              border-top  1 1em solid rgba 255  255  255  0 2   x000D              border-right  1 1em solid rgba 255  255  255  0 2   x000D              border-bottom  1 1em solid rgba 255  255  255  0 2   x000D              border-left  1 1em solid  ffffff  x000D              -webkit-transform  translateZ 0   x000D              -ms-transform  translateZ 0   x000D              transform  translateZ 0   x000D              -webkit-animation  load8 1 1s infinite linear  x000D              animation  load8 1 1s infinite linear  x000D            x000D           -webkit-keyframes load8   x000D              0    x000D                  -webkit-transform  rotate 0deg   x000D                  transform  rotate 0deg   x000D                x000D              100    x000D                  -webkit-transform  rotate 360deg   x000D                  transform  rotate 360deg   x000D                x000D            x000D           keyframes load8   x000D              0    x000D                  -webkit-transform  rotate 0deg   x000D                  transform  rotate 0deg   x000D                x000D              100    x000D                  -webkit-transform  rotate 360deg   x000D                  transform  rotate 360deg   x000D                x000D            x000D           loadingDiv   x000D              position absolute   x000D              top 0  x000D              left 0  x000D              width 100   x000D              height 100   x000D              background-color  000  x000D            x000D  This script will add a div that covers the entire window as the page loads  It will show a CSS-only loading spinner automatically  It will wait until the window  not the document  finishes loading  x000D   x000D     lt ul gt  x000D       lt li gt Works with jQuery 3  which has a new window load event lt  li gt  x000D       lt li gt No image needed but it s easy to add one lt  li gt  x000D       lt li gt Change the delay for branding or instructions lt  li gt  x000D       lt li gt Only dependency is jQuery  lt  li gt  x000D     lt  ul gt  x000D   x000D  Place the script below at the bottom of the body  x000D   x000D  CSS loader code from https   projects lukehaas me css-loaders x000D   x000D   lt  -- Place the script below at the bottom of the body -- gt  x000D   x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   x000D   x000D

User · Answer

My blog will work 100 percent    x000D   x000D  function showLoader   x000D    x000D          loader   fadeIn  slow    x000D    x000D  function hideLoader   x000D    x000D          loader   fadeOut  slow    x000D    x000D   loader   x000D      position  fixed  x000D      left  0px  x000D      top  0px  x000D      width  100   x000D      height  100   x000D      z-index  9999  x000D      background  url  pageLoader2 gif   50  50  no-repeat rgb 249 249 249   x000D      opacity   8  x000D    x000D   lt div class  loader  gt  x000D   x000D   x000D

User · Answer

I have another below simple solution for this which perfectly worked for me    First of all  create a CSS with name Lockon class which is transparent overlay along with loading GIF as shown below    LockOn       display  block      visibility  visible      position  absolute      z-index  999      top  0px      left  0px      width  105       height  105       background-color white      vertical-align bottom      padding-top  20        filter  alpha opacity 75        opacity  0 75       font-size large      color blue      font-style italic      font-weight 400      background-image  url     Common loadingGIF gif        background-repeat  no-repeat      background-attachment  fixed      background-position  center      Now we need to create our div with this class which cover entire page as an overlay whenever the page is getting loaded   lt div id  coverScreen   class  LockOn  gt   lt  div gt    Now we need to hide this cover screen whenever the page is ready and so that we can restrict the user from clicking firing any event until the page is ready    window  on  load   function          coverScreen   hide          Above solution will be fine whenever the page is loading   Now the question is after the page is loaded  whenever we click a button or an event which will take a long time  we need to show this in the client click event as shown below      ucNoteGrid grdViewNotes ctl01 btnPrint   click function          coverScreen   show          That means when we click this print button  which will take a long time to give the report  it will show our cover screen with GIF which gives  result and once the page is ready above windows on load function will fire and which hide the cover screen once the screen is fully loaded

User · Answer

for drupal in your theme custom theme theme file function custom theme preprocess html  amp  variables     variables  preloader     1     In html html twig file after skip main content link in body    if preloader        lt div id  quot test-preloader quot   gt       lt div id  quot preloader-inner quot  class  quot cssload-container quot  gt         lt div class  quot wait-text quot  gt     Please wait     t     lt  div gt          lt div class  quot cssload-item cssload-moon quot  gt  lt  div gt       lt  div gt     lt  div gt     endif       in css file  test-preloader   position  fixed  background  white  width  100   height  100   top  0  left  0  z-index  9999     cssload-container  wait-text   text-align  center  padding-bottom  15px  color   000      cssload-container  cssload-item    margin  auto   position  absolute   top  0   right  0   bottom  0   left  0   width  131px   height  131px   background-color   fff   box-sizing  border-box   -o-box-sizing  border-box   -ms-box-sizing  border-box   -webkit-box-sizing  border-box   -moz-box-sizing  border-box   box-shadow  0 0 21px 3px rgba 130  130  130  0 26    -o-box-shadow  0 0 21px 3px rgba 130  130  130  0 26    -ms-box-shadow  0 0 21px 3px rgba 130  130  130  0 26    -webkit-box-shadow  0 0 21px 3px rgba 130  130  130  0 26    -moz-box-shadow  0 0 21px 3px rgba 130  130  130  0 26        cssload-container  cssload-moon   border-bottom  26px solid  008AFA  border-radius  50   -o-border-radius  50   -ms-border-radius  50   -webkit-border-radius  50   -moz-border-radius  50   animation  spin 1 45s ease infinite  -o-animation  spin 1 45s ease infinite  -ms-animation  spin 1 45s ease infinite  -webkit-animation  spin 1 45s ease infinite  -moz-animation  spin 1 45s ease infinite

User · Answer

Create a  lt div gt  element that contains your loading message  give the  lt div gt  an ID  and then when your content has finished loading  hide the  lt div gt        myElement   css  display    none         or in plain JavaScript   document getElementById  myElement   style display    none

User · Answer

Based on  mehyaa answer  but much shorter   HTML  right after  lt body gt      lt img id    loading  src    loading gif  alt    Loading indicator  gt    CSS    loading     position  absolute    top  50     left  50     width  32px    height  32px       1 2 of the height and width of the actual gif      margin  -16px 0 0 -16px    z-index  100        Javascript  jQuery  since I m already using it      window  load function           loading   remove

[javascript] How to show Page Loading div until the page has finished loading?

Examples related to javascript

Examples related to jquery

Examples related to html

Examples related to dom

Examples related to loader