How can I create a Please Wait Loading animation using jQuery

Question

I would like to place a  please wait  loading  spinning circle animation on my site  How should I accomplish this using jQuery

User · Answer

I use CSS3 for animation   x000D   x000D                CSS3                x000D   icon-spin   x000D    font-size  1 5em  x000D    display  inline-block  x000D    animation  spin1 2s infinite linear  x000D    x000D   x000D   keyframes spin1  x000D      0  transform rotate 0deg   x000D      100  transform rotate 359deg   x000D    x000D   x000D                  CSS3 cross-platform                     x000D   x000D   icon-spin-cross-platform   x000D    font-size  1 5em  x000D    display  inline-block  x000D    -moz-animation  spin 2s infinite linear  x000D    -o-animation  spin 2s infinite linear  x000D    -webkit-animation  spin 2s infinite linear  x000D    animation  spin2 2s infinite linear  x000D    x000D   x000D   keyframes spin2  x000D      0  transform rotate 0deg   x000D      100  transform rotate 359deg   x000D    x000D   -moz-keyframes spin2  x000D      0  -moz-transform rotate 0deg   x000D      100  -moz-transform rotate 359deg   x000D    x000D   -webkit-keyframes spin2  x000D      0  -webkit-transform rotate 0deg   x000D      100  -webkit-transform rotate 359deg   x000D    x000D   -o-keyframes spin2  x000D      0  -o-transform rotate 0deg   x000D      100  -o-transform rotate 359deg   x000D    x000D   -ms-keyframes spin2  x000D      0  -ms-transform rotate 0deg   x000D      100  -ms-transform rotate 359deg   x000D    x000D   lt link href  https   maxcdn bootstrapcdn com bootstrap 3 3 7 css bootstrap min css  rel  stylesheet   gt  x000D   x000D   x000D   lt div class  row  gt  x000D     lt div class  col-md-6  gt  x000D      Default CSS3 x000D       lt span class  glyphicon glyphicon-repeat icon-spin  gt  lt  span gt  x000D     lt  div gt  x000D     lt div class  col-md-6  gt  x000D      Cross-Platform CSS3 x000D       lt span class  glyphicon glyphicon-repeat icon-spin-cross-platform  gt  lt  span gt  x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

If you are using Turbolinks With Rails this is my solution   This is the CoffeeScript    window  on  page fetch   - gt       body   append   lt div class  modal  gt  lt  div gt         body   addClass  loading      window  on  page change   - gt       body   removeClass  loading     This is the SASS CSS based on the first excellent answer from Jonathan Sampson    loader css scss   modal       display     none      position    fixed      z-index     1000      top         0      left        0      height      100       width       100       background  rgba  255  255  255  0 4              asset-url  ajax-loader gif   image              50  50               no-repeat    body loading       overflow  hidden        body loading  modal       display  block

User · Answer

Most of the solutions I have seen either expects us to design a loading overlay  keep it hidden and then unhide it when required  or  show a gif or image etc   I wanted to develop a robust plugin  where with a simply jQuery call I can display the loading screen and tear it down when the task is completed   Below is the code  It depends on Font awesome and jQuery          Raj  Used basic sources from here  http   jsfiddle net eys3d 741          function            Retain count concept  http   stackoverflow com a 2420247 260665        Callers should make sure that for every invocation of loadingSpinner method there has to be an equivalent invocation of removeLoadingSpinner     var retainCount   0          http   stackoverflow com a 13992290 260665 difference between   fn extend and   extend       extend           loadingSpinner  function                    add the overlay with loading image to the page             var over     lt div id  custom-loading-overlay  gt                       lt i id  custom-loading  class  fa fa-spinner fa-spin fa-3x fa-fw  style  font-size 48px  color   470A68   gt  lt  i gt                      lt  div gt                if  0   retainCount                      over  appendTo  body                              retainCount                       removeLoadingSpinner  function                 retainCount--              if  retainCount lt  0                        custom-loading-overlay   remove                    retainCount   0                                    jQuery       Just put the above in a js file and include it throughout the project   CSS addition    custom-loading-overlay       position  absolute      left  0      top  0      bottom  0      right  0      background   000      opacity  0 8      filter  alpha opacity 80      custom-loading       width  50px      height  57px      position  absolute      top  50       left  50       margin  -28px 0 0 -25px      Invocation     loadingSpinner      removeLoadingSpinner

User · Answer

This would make the buttons disappear  then an animation of  loading  would appear in their place and finally just display a success message     function            submit   click function                submit   hide                form  buttons   append   lt img src  assets img loading gif  alt  Loading     id  loading    gt               post  sendmail php                    emailFrom  nameVal  subject  subjectVal  message  messageVal                   function data                       jQuery   form   slideUp  normal   function                                                  form   before   lt h1 gt Success lt  h1 gt  lt p gt Your email was sent  lt  p gt

User · Answer

Jonathon s excellent solution breaks in IE8  the animation does not show at all   To fix this  change the CSS to    modal   display     none  position    fixed  z-index     1000  top         0  left        0  height      100   width       100   background  rgba  255  255  255   8                url  http   i stack imgur com FhHRx gif                50  50               no-repeat  opacity  0 80  -ms-filter  progid DXImageTransform Microsoft Alpha Opacity   80   filter  alpha opacity   80

User · Answer

SVG animations are probably a better solution to this problem  You won t need to worry about writing CSS and compared to GIFs  you ll get better resolution and alpha transparency  Some very good SVG loading animations that you can use are here  http   samherbert net svg-loaders  You can also use those animations directly through a service I built  https   svgbox net iconset loaders  It allows you to customize the fill and direct usage  hotlinking  is permitted  To accomplish what you want to do with jQuery  you probably should have a loading info element hidden and use  show   when you want to show the loader  For eg  this code shows the loader after one second   x000D   x000D  setTimeout function           load   show       1000  x000D   lt script src  https   cdnjs cloudflare com ajax libs jquery 3 3 0 jquery min js  gt  lt  script gt    lt div id  load  style  display none  gt      Please wait          lt img src    s svgbox net loaders svg fill maroon amp ic tail-spin            style  width 24px  gt   lt  div gt  x000D   x000D   x000D

User · Answer

You can grab an animated GIF of a spinning circle from Ajaxload - stick that somewhere in your website file heirarchy  Then you just need to add an HTML element with the correct code  and remove it when you re done  This is fairly simple   function showLoadingImage             yourParentElement   append   lt div id  loading-image  gt  lt img src  path to loading gif  alt  Loading       gt  lt  div gt        function hideLoadingImage             loading-image   remove        You then just need to use these methods in your AJAX call     load        http   example com myurl           random    data   1  2   dwarfs   7        function  responseText  textStatus  XMLHttpRequest             hideLoadingImage                  this will be run immediately after the AJAX call has been made     not when it completes  showLoadingImage      This has a few caveats  first of all  if you have two or more places the loading image can be shown  you re going to need to kep track of how many calls are running at once somehow  and only hide when they re all done  This can be done using a simple counter  which should work for almost all cases   Secondly  this will only hide the loading image on a successful AJAX call  To handle the error states  you ll need to look into   ajax  which is more complex than   load    get and the like  but a lot more flexible too

User · Answer

Like Mark H said the blockUI is the way   Ex     lt script type  text javascript  src  javascript jquery jquery blockUI js  gt  lt  script gt   lt script gt     unblock when ajax activity stops   document  ajaxStop   unblockUI         downloadButton   click function              dialog   dialog           width  390px           modal true          buttons                 OK  AGUARDO O E-MAIL     function                       blockUI   message    lt img src  img ajax-loader gif    gt                       send                                         function send           ajax           url   download-enviar do                     type   POST           blablabla            lt  script gt    Obs   I got the ajax-loader gif on http   www ajaxload info

User · Answer

It is very simple  HTML  lt link rel  quot stylesheet quot  href  quot https   www w3schools com w3css 4 w3 css quot  gt    lt body gt      lt div id  quot cover quot  gt   lt span class  quot glyphicon glyphicon-refresh w3-spin preloader-Icon quot  gt  lt  span gt Please Wait  Loading    lt  div gt      lt h1 gt Dom Loaded lt  h1 gt   lt  body gt   CSS  cover     position  fixed    height  100     width  100     top  0    left  0    background   141526    z-index  9999    font-size  65px    text-align  center    padding-top  200px    color   fff    font-family tahoma     JS - JQuery   window  on  load   function           quot  cover quot   fadeOut 1750

User · Answer

Along with what Jonathan and Samir suggested  both excellent answers btw    jQuery has some built in events that it ll fire for you when making an ajax request   There s the ajaxStart event     Show a loading message whenever an AJAX request starts  and none is already active        and it s brother  the ajaxStop event     Attach a function to be executed whenever all AJAX requests have ended  This is an Ajax Event    Together  they make a fine way to show a progress message when any ajax activity is happening anywhere on the page   HTML    lt div id  loading  gt     lt p gt  lt img src  loading gif    gt  Please Wait lt  p gt   lt  div gt    Script     document  ajaxStart function            loading   show        ajaxStop function            loading   hide

User · Answer

With all due respect to other posts  you have here a very simple solution  using CSS3 and jQuery  without using any further external resources nor files    x000D   x000D      submit   click function    x000D      this  addClass  button loader   attr  value       x000D    window setTimeout function    x000D          submit   removeClass  button loader   attr  value    u2713    x000D          submit   prop  disabled   true   x000D       3000   x000D      x000D   submit focus  x000D    outline none  x000D    outline-offset  none  x000D    x000D   x000D   button   x000D      display  inline-block  x000D      padding  6px 12px  x000D      margin  20px 8px  x000D      font-size  14px  x000D      font-weight  400  x000D      line-height  1 42857143  x000D      text-align  center  x000D      white-space  nowrap  x000D      vertical-align  middle  x000D      -ms-touch-action  manipulation  x000D      cursor  pointer  x000D      -webkit-user-select  none  x000D      -moz-user-select  none  x000D      -ms-user-select  none  x000D      background-image  none  x000D      border  2px solid transparent  x000D      border-radius  5px  x000D      color   000  x000D      background-color   b2b2b2  x000D      border-color   969696  x000D    x000D   x000D   button loader   x000D    background-color  transparent  x000D    border  4px solid  f3f3f3  x000D    border-radius  50   x000D    border-top  4px solid  969696  x000D    border-bottom  4px solid  969696  x000D    width  35px  x000D    height  35px  x000D    -webkit-animation  spin 0 8s linear infinite  x000D    animation  spin 0 8s linear infinite  x000D    x000D   x000D   -webkit-keyframes spin   x000D    0    -webkit-transform  rotate 0deg     x000D    99    -webkit-transform  rotate 360deg     x000D    x000D   x000D   keyframes spin   x000D    0    transform  rotate 0deg     x000D    99    transform  rotate 360deg     x000D    x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   lt input id  submit  class  button  type  submit  value  Submit    gt  x000D   x000D   x000D

User · Answer

Per https   www w3schools com howto howto css loader asp  this is a 2-step process with no JS   1 Add this HTML where you want the spinner   lt div class  loader  gt  lt  div gt   2 Add this CSS to make the actual spinner    loader       border  16px solid  f3f3f3     Light grey        border-top  16px solid  3498db     Blue        border-radius  50       width  120px      height  120px      animation  spin 2s linear infinite      keyframes spin       0    transform  rotate 0deg         100    transform  rotate 360deg

User · Answer

Place this code on your body tag  lt div class  quot loader quot  gt   lt div class  quot loader-centered quot  gt       lt div class  quot object square-one quot  gt  lt  div gt       lt div class  quot object square-two quot  gt  lt  div gt       lt div class  quot object square-three quot  gt  lt  div gt   lt  div gt   lt  div gt   lt div class  quot container quot  gt   lt div class  quot jumbotron quot  gt       lt h1 id  quot loading-text quot  gt Loading    lt  h1 gt   lt  div gt   lt  div gt   And use this jquery script  lt script type  quot text javascript quot  gt   jQuery window  load function          quot  loader-centered quot   fadeOut      in production change 5000 to 400    quot  loader quot   delay 5000  fadeOut  quot slow quot       quot  loading-text quot   addClass  text-success   html  page loaded         lt  script gt   See a full example working here  http   bootdey com snippets view page-loader

User · Answer

jQuery provides event hooks for when AJAX requests start and end  You can hook into these to show your loader   For example  create the following div    lt div id  spinner  gt     lt img src  images spinner gif  alt  Loading    gt   lt  div gt    Set it to display  none in your stylesheets  You can style it whatever way you want to  You can generate a nice loading image at Ajaxload info  if you want to   Then  you can use something like the following to make it be shown automatically when sending Ajax requests     document  ready function               spinner   bind  ajaxSend   function               this  show           bind  ajaxComplete   function               this  hide                   Simply add this Javascript block to the end of your page before closing your body tag or wherever you see fit   Now  whenever you send Ajax requests  the  spinner div will be shown  When the request is complete  it ll be hidden again

User · Answer

You could do this various different ways  It could be a subtle as a small status on the page saying  Loading      or as loud as an entire element graying out the page while the new data is loading  The approach I m taking below will show you how to accomplish both methods   The Setup  Let s start by getting us a nice  loading  animation from http   ajaxload info  I ll be using    Let s create an element that we can show hide anytime we re making an ajax request    lt div class  modal  gt  lt  -- Place at bottom of page -- gt  lt  div gt    The CSS  Next let s give it some flair      Start by setting display none to make this hidden     Then we position it in relation to the viewport window    with position fixed  Width  height  top and left speak    for themselves  Background we set to 80  white with    our animation centered  and no-repeating     modal       display     none      position    fixed      z-index     1000      top         0      left        0      height      100       width       100       background  rgba  255  255  255   8                    url  http   i stack imgur com FhHRx gif                    50  50                   no-repeat        When the body has the loading class  we turn    the scrollbar off with overflow hidden    body loading  modal       overflow  hidden           Anytime the body has the loading class  our    modal element will be visible    body loading  modal       display  block      And finally  the jQuery  Alright  on to the jQuery  This next part is actually really simple    body      body       document  on       ajaxStart  function      body addClass  loading               ajaxStop  function      body removeClass  loading                That s it  We re attaching some events to the body element anytime the ajaxStart or ajaxStop events are fired  When an ajax event starts  we add the  loading  class to the body  and when events are done  we remove the  loading  class from the body   See it in action  http   jsfiddle net VpDUG 4952

User · Answer

Note that when using ASP Net MVC  with using  Ajax BeginForm      setting the ajaxStart will not work   Use the AjaxOptions to overcome this issue    Ajax BeginForm  ActionName   new AjaxOptions   OnBegin    uiOfProccessingAjaxAction   OnComplete    uiOfProccessingAjaxActionComplete

User · Answer

As far as the actual loading image  check out this site for a bunch of options   As far as displaying a DIV with this image when a request begins  you have a few choices   A  Manually show and hide the image       form   submit function             wait   show          post   whatever php   function                 wait   hide                return false        B  Use ajaxStart and ajaxComplete       wait   ajaxStart function           this  show       ajaxComplete function           this  hide          Using this the element will show hide for any request  Could be good or bad  depending on the need   C  Use individual callbacks for a particular request       form   submit function           ajax           url    whatever php           beforeSend  function         wait   show               complete  function         wait   hide                  return false

[jquery] How can I create a "Please Wait, Loading..." animation using jQuery?

Examples related to jquery

Examples related to animation