How to show loading spinner in jQuery

Question

In Prototype I can show a  loading     image with this code   var myAjax   new Ajax Request  url   method   get   parameters  pars   onLoading  showLoad  onComplete  showResponse      function showLoad                  In jQuery  I can load a server page into an element with this       message   load  index php pg ajaxFlashcard      but how do I attach a loading spinner to this command as I did in Prototype

User · Answer

I ended up with two changes to the original reply.

As of jQuery 1.8, ajaxStart and ajaxStop should only be attached to document. This makes it harder to filter only a some of the ajax requests. Soo...
Switching to ajaxSend and ajaxComplete makes it possible to interspect the current ajax request before showing the spinner.

This is the code after these changes:

$(document)
    .hide()  // hide it initially
    .ajaxSend(function(event, jqxhr, settings) {
        if (settings.url !== "ajax/request.php") return;
        $(".spinner").show();
    })
    .ajaxComplete(function(event, jqxhr, settings) {
        if (settings.url !== "ajax/request.php") return;
        $(".spinner").hide();
    })

User · Answer

Note that you must use asynchronous calls for spinners to work  at least that is what caused mine to not show until after the ajax call and then swiftly went away as the call had finished and removed the spinner      ajax           url  requestUrl          data  data          dataType   JSON           processData  false          type  requestMethod          async  true                           lt  lt  lt  lt  lt  lt ------ set async to true         accepts   application json           contentType   application json           success  function  restResponse                   something here                    error  function  restResponse                   something here

User · Answer

Try this code How To Show Loading Spinner In JQuery   lt  DOCTYPE html gt   lt html lang  quot en quot  gt   lt head gt   lt meta charset  quot utf-8 quot  gt   lt title gt How To Show Loading Spinner In JQuery  - phpcodingstuff com lt  title gt   lt style gt   overlay      display  none      position  fixed      width  100       height  100       top  0      left  0      z-index  999      background  rgba 255 255 255 0 8  url  quot loader-img gif quot   center no-repeat       Turn off scrollbar when body element has the loading class    body loading      overflow  hidden          Make spinner image visible when body element has the loading class    body loading  overlay      display  block     lt  style gt   lt script src  quot https   code jquery com jquery-3 5 1 min js quot  gt  lt  script gt   lt script gt     Initiate an Ajax request on button click   document  on  quot click quot    quot button quot   function          get  quot customers php quot   function data              quot body quot   html data                           document  on       ajaxStart  function               quot body quot   addClass  quot loading quot                ajaxStop  function                quot body quot   removeClass  quot loading quot                    lt  script gt   lt  head gt   lt body style  quot text-align  center  quot  gt       lt button type  quot button quot  gt Get Customers Details lt  button gt       lt p gt Click the above button to get the customers details from the web server via Ajax  lt  p gt       lt div class  quot overlay quot  gt  lt  div gt   lt  body gt   lt  html gt

User · Answer

You can simply assign a loader image to the same tag on which you later will load content using an Ajax call       message   html   lt span gt Loading    lt  span gt          message   load  index php pg ajaxFlashcard      You can also replace the span tag with an image tag

User · Answer

I ve used the following with jQuery UI Dialog   Maybe it works with other ajax callbacks        lt div gt  lt img src   i loading gif  id  loading    gt  lt  div gt    load   ajax html   dialog       height  300      width  600      title   Wait for it           The  contains an animated loading gif until its content is replaced when the ajax call completes

User · Answer

If you plan to use a loader everytime you make a server request  you can use the following pattern    jTarget ajaxloader        re start the loader    post   libs jajaxloader demo service service php   function  content         jTarget append content      or do something with the content       always function           jTarget ajaxloader  stop           This code in particular uses the jajaxloader plugin  which I just created   https   github com lingtalfi JAjaxLoader

User · Answer

You can insert the animated image into the DOM right before the AJAX call  and do an inline function to remove it         myDiv   html   lt img src  images spinner gif  alt  Wait    gt         message   load  index php pg ajaxFlashcard   null  function           myDiv   html            This will make sure your animation starts at the same frame on subsequent requests  if that matters   Note that old versions of IE might have difficulties with the animation   Good luck

User · Answer

Use the loading plugin   http   plugins jquery com project loading    loading onAjax  img  loading gif

User · Answer

There are a couple of ways  My preferred way is to attach a function to the ajaxStart Stop events on the element itself       loadingDiv        hide       Hide it initially      ajaxStart function               this  show                ajaxStop function               this  hide               The ajaxStart Stop functions will fire whenever you do any Ajax calls   Update  As of jQuery 1 8  the documentation states that  ajaxStart Stop should only be attached to document  This would transform the above snippet to   var  loading       loadingDiv   hide      document     ajaxStart function           loading show            ajaxStop function           loading hide

User · Answer

As well as setting global defaults for ajax events  you can set behaviour for specific elements  Perhaps just changing their class would be enough       myForm   ajaxSend  function           this  addClass  loading            myForm   ajaxComplete  function          this  removeClass  loading          Example CSS  to hide  myForm with a spinner    loading       display  block      background  url spinner gif  no-repeat center middle      width  124px      height  124px      margin  0 auto       Hide all the children of the  loading  element     loading         display  none

User · Answer

This is a very simple and smart plugin for that specific purpose  https   github com hekigan is-loading

User · Answer

I ve used the following with jQuery UI Dialog   Maybe it works with other ajax callbacks        lt div gt  lt img src   i loading gif  id  loading    gt  lt  div gt    load   ajax html   dialog       height  300      width  600      title   Wait for it           The  contains an animated loading gif until its content is replaced when the ajax call completes

User · Answer

As well as setting global defaults for ajax events  you can set behaviour for specific elements  Perhaps just changing their class would be enough       myForm   ajaxSend  function           this  addClass  loading            myForm   ajaxComplete  function          this  removeClass  loading          Example CSS  to hide  myForm with a spinner    loading       display  block      background  url spinner gif  no-repeat center middle      width  124px      height  124px      margin  0 auto       Hide all the children of the  loading  element     loading         display  none

User · Answer

I ended up with two changes to the original reply.

As of jQuery 1.8, ajaxStart and ajaxStop should only be attached to document. This makes it harder to filter only a some of the ajax requests. Soo...
Switching to ajaxSend and ajaxComplete makes it possible to interspect the current ajax request before showing the spinner.

This is the code after these changes:

$(document)
    .hide()  // hide it initially
    .ajaxSend(function(event, jqxhr, settings) {
        if (settings.url !== "ajax/request.php") return;
        $(".spinner").show();
    })
    .ajaxComplete(function(event, jqxhr, settings) {
        if (settings.url !== "ajax/request.php") return;
        $(".spinner").hide();
    })

User · Answer

You can insert the animated image into the DOM right before the AJAX call  and do an inline function to remove it         myDiv   html   lt img src  images spinner gif  alt  Wait    gt         message   load  index php pg ajaxFlashcard   null  function           myDiv   html            This will make sure your animation starts at the same frame on subsequent requests  if that matters   Note that old versions of IE might have difficulties with the animation   Good luck

User · Answer

There are a couple of ways  My preferred way is to attach a function to the ajaxStart Stop events on the element itself       loadingDiv        hide       Hide it initially      ajaxStart function               this  show                ajaxStop function               this  hide               The ajaxStart Stop functions will fire whenever you do any Ajax calls   Update  As of jQuery 1 8  the documentation states that  ajaxStart Stop should only be attached to document  This would transform the above snippet to   var  loading       loadingDiv   hide      document     ajaxStart function           loading show            ajaxStop function           loading hide

User · Answer

message   load  index php pg ajaxFlashcard   null  showResponse   showLoad     function showResponse         hideLoad                http   docs jquery com Ajax load urldatacallback

User · Answer

If you are using   ajax   you can use somthing like this    ajax     url   quot destination url quot     success  sdialog    error  edialog       shows the loader element before sending    beforeSend  function            quot  imgSpinner1 quot   show              hides the loader after completion of request  whether successfull or failor                 complete  function            quot  imgSpinner1 quot   hide           type   POST     dataType   json       Although the setting is named  quot beforeSend quot   as of jQuery 1 5  quot beforeSend quot  will be called regardless of the request type  i e  The  show   function will be called if type   GET

User · Answer

If you plan to use a loader everytime you make a server request  you can use the following pattern    jTarget ajaxloader        re start the loader    post   libs jajaxloader demo service service php   function  content         jTarget append content      or do something with the content       always function           jTarget ajaxloader  stop           This code in particular uses the jajaxloader plugin  which I just created   https   github com lingtalfi JAjaxLoader

User · Answer

I also want to contribute to this answer  I was looking for something similar in jQuery and this what I eventually ended up using   I got my loading spinner from http   ajaxload info   My solution is based on this simple answer at http   christierney com 2011 03 23 global-ajax-loading-spinners    Basically your HTML markup and CSS would look like this    lt style gt        ajaxSpinnerImage             display  none          lt  style gt    lt div id  ajaxSpinnerContainer  gt        lt img src    Content ajax-loader gif  id  ajaxSpinnerImage  title  working       gt   lt  div gt    And then you code for jQuery would look something like this    lt script gt         document  ready function                  document             ajaxStart function                         ajaxSpinnerImage   show                            ajaxStop function                         ajaxSpinnerImage   hide                             var owmAPI    http   api openweathermap org data 2 5 weather q London uk amp APPID YourAppID               getJSON owmAPI             done function  data                   alert data coord lon                           fail function                     alert  error                            lt  script gt    It is as simple as that

User · Answer

My ajax code looks like this  in effect  I have just commented out async  false line and the spinner shows up     ajax           url    Url Action  MyJsonAction    Home             type   POST           dataType   json           data   parameter variable             async  false            error  function                          success  function  data              if  Object keys data  length  gt  0                use data                            ajaxspinner   hide                          I am showing the spinner within a function before the ajax code       MyDropDownID   change function                  ajaxspinner   show      For Html  I have used a font awesome class    lt i id  ajaxspinner  class  fas fa-spinner fa-spin fa-3x fa-fw  style  display none  gt  lt  i gt   Hope it helps someone

User · Answer

If you are using   ajax   you can use somthing like this    ajax     url   quot destination url quot     success  sdialog    error  edialog       shows the loader element before sending    beforeSend  function            quot  imgSpinner1 quot   show              hides the loader after completion of request  whether successfull or failor                 complete  function            quot  imgSpinner1 quot   hide           type   POST     dataType   json       Although the setting is named  quot beforeSend quot   as of jQuery 1 5  quot beforeSend quot  will be called regardless of the request type  i e  The  show   function will be called if type   GET

User · Answer

If you don t want to write your own code  there are also a lot of plugins that do just that    https   github com keithhackbarth jquery-loading http   plugins jquery com project loading

User · Answer

JavaScript    listen  click     captcha   function             captcha-block   html   lt div id  loading  style  width  70px  height  40px  display  inline-block     gt           get   captcha new   null  function data                captcha-block   html data                return false        CSS   loading   background  url  image loading gif  no-repeat center

User · Answer

You can always use Block UI jQuery plugin which does everything for you  and it even blocks the page of any input while the ajax is loading  In case that the plugin seems to not been working  you can read about the right way to use it in this answer  Check it out

User · Answer

JavaScript    listen  click     captcha   function             captcha-block   html   lt div id  loading  style  width  70px  height  40px  display  inline-block     gt           get   captcha new   null  function data                captcha-block   html data                return false        CSS   loading   background  url  image loading gif  no-repeat center

User · Answer

For jQuery I use  jQuery ajaxSetup     beforeSend  function              loader   show           complete  function             loader   hide           success  function

User · Answer

There are a couple of ways  My preferred way is to attach a function to the ajaxStart Stop events on the element itself       loadingDiv        hide       Hide it initially      ajaxStart function               this  show                ajaxStop function               this  hide               The ajaxStart Stop functions will fire whenever you do any Ajax calls   Update  As of jQuery 1 8  the documentation states that  ajaxStart Stop should only be attached to document  This would transform the above snippet to   var  loading       loadingDiv   hide      document     ajaxStart function           loading show            ajaxStop function           loading hide

User · Answer

You can insert the animated image into the DOM right before the AJAX call  and do an inline function to remove it         myDiv   html   lt img src  images spinner gif  alt  Wait    gt         message   load  index php pg ajaxFlashcard   null  function           myDiv   html            This will make sure your animation starts at the same frame on subsequent requests  if that matters   Note that old versions of IE might have difficulties with the animation   Good luck

User · Answer

JavaScript    listen  click     captcha   function             captcha-block   html   lt div id  loading  style  width  70px  height  40px  display  inline-block     gt           get   captcha new   null  function data                captcha-block   html data                return false        CSS   loading   background  url  image loading gif  no-repeat center

User · Answer

I do this   var preloaderdiv     lt div class  thumbs preloader  gt Loading    lt  div gt                   detail thumbnails   html preloaderdiv                  ajax                           async true                          url    Ajaxification getRandomUser top      sender  css  top      amp lef      sender  css  left                            success function data                                   detail thumbnails   html data

User · Answer

If you don t want to write your own code  there are also a lot of plugins that do just that    https   github com keithhackbarth jquery-loading http   plugins jquery com project loading

User · Answer

Variant  I have an icon with id  logo  at the top left of the main page  a spinner gif is then overlaid on top  with transparency  when ajax is working   jQuery ajaxSetup     beforeSend  function              logo   css  background    url images ajax-loader gif  no-repeat          complete  function             logo   css  background    none          success  function

User · Answer

My ajax code looks like this  in effect  I have just commented out async  false line and the spinner shows up     ajax           url    Url Action  MyJsonAction    Home             type   POST           dataType   json           data   parameter variable             async  false            error  function                          success  function  data              if  Object keys data  length  gt  0                use data                            ajaxspinner   hide                          I am showing the spinner within a function before the ajax code       MyDropDownID   change function                  ajaxspinner   show      For Html  I have used a font awesome class    lt i id  ajaxspinner  class  fas fa-spinner fa-spin fa-3x fa-fw  style  display none  gt  lt  i gt   Hope it helps someone

User · Answer

You can insert the animated image into the DOM right before the AJAX call  and do an inline function to remove it         myDiv   html   lt img src  images spinner gif  alt  Wait    gt         message   load  index php pg ajaxFlashcard   null  function           myDiv   html            This will make sure your animation starts at the same frame on subsequent requests  if that matters   Note that old versions of IE might have difficulties with the animation   Good luck

User · Answer

JavaScript    listen  click     captcha   function             captcha-block   html   lt div id  loading  style  width  70px  height  40px  display  inline-block     gt           get   captcha new   null  function data                captcha-block   html data                return false        CSS   loading   background  url  image loading gif  no-repeat center

User · Answer

message   load  index php pg ajaxFlashcard   null  showResponse   showLoad     function showResponse         hideLoad                http   docs jquery com Ajax load urldatacallback

User · Answer

Try this code How To Show Loading Spinner In JQuery   lt  DOCTYPE html gt   lt html lang  quot en quot  gt   lt head gt   lt meta charset  quot utf-8 quot  gt   lt title gt How To Show Loading Spinner In JQuery  - phpcodingstuff com lt  title gt   lt style gt   overlay      display  none      position  fixed      width  100       height  100       top  0      left  0      z-index  999      background  rgba 255 255 255 0 8  url  quot loader-img gif quot   center no-repeat       Turn off scrollbar when body element has the loading class    body loading      overflow  hidden          Make spinner image visible when body element has the loading class    body loading  overlay      display  block     lt  style gt   lt script src  quot https   code jquery com jquery-3 5 1 min js quot  gt  lt  script gt   lt script gt     Initiate an Ajax request on button click   document  on  quot click quot    quot button quot   function          get  quot customers php quot   function data              quot body quot   html data                           document  on       ajaxStart  function               quot body quot   addClass  quot loading quot                ajaxStop  function                quot body quot   removeClass  quot loading quot                    lt  script gt   lt  head gt   lt body style  quot text-align  center  quot  gt       lt button type  quot button quot  gt Get Customers Details lt  button gt       lt p gt Click the above button to get the customers details from the web server via Ajax  lt  p gt       lt div class  quot overlay quot  gt  lt  div gt   lt  body gt   lt  html gt

User · Answer

Variant  I have an icon with id  logo  at the top left of the main page  a spinner gif is then overlaid on top  with transparency  when ajax is working   jQuery ajaxSetup     beforeSend  function              logo   css  background    url images ajax-loader gif  no-repeat          complete  function             logo   css  background    none          success  function

User · Answer

loading-image   html   lt img src   images ajax-loader gif  gt  Sending                  ajax               url   uri              cache  false              success  function                        loading-image   html                                            error    function jqXHR  textStatus  errorThrown                var text     Error has occured when submitting the job    jqXHR status    Contact IT dept                  loading-image   html   lt span style  color red  gt   text      lt  span gt

User · Answer

You can simply assign a loader image to the same tag on which you later will load content using an Ajax call       message   html   lt span gt Loading    lt  span gt          message   load  index php pg ajaxFlashcard      You can also replace the span tag with an image tag

User · Answer

You can always use Block UI jQuery plugin which does everything for you  and it even blocks the page of any input while the ajax is loading  In case that the plugin seems to not been working  you can read about the right way to use it in this answer  Check it out

User · Answer

This is the best way for me   jQuery     document  ajaxStart function           loading   show           document  ajaxStop function           loading   hide          Coffee       document  ajaxStart - gt          loading   show        document  ajaxStop - gt          loading   hide     Docs  ajaxStart  ajaxStop

User · Answer

This is a very simple and smart plugin for that specific purpose  https   github com hekigan is-loading

User · Answer

This is the best way for me   jQuery     document  ajaxStart function           loading   show           document  ajaxStop function           loading   hide          Coffee       document  ajaxStart - gt          loading   show        document  ajaxStop - gt          loading   hide     Docs  ajaxStart  ajaxStop

User · Answer

There are a couple of ways  My preferred way is to attach a function to the ajaxStart Stop events on the element itself       loadingDiv        hide       Hide it initially      ajaxStart function               this  show                ajaxStop function               this  hide               The ajaxStart Stop functions will fire whenever you do any Ajax calls   Update  As of jQuery 1 8  the documentation states that  ajaxStart Stop should only be attached to document  This would transform the above snippet to   var  loading       loadingDiv   hide      document     ajaxStart function           loading show            ajaxStop function           loading hide

User · Answer

For jQuery I use  jQuery ajaxSetup     beforeSend  function              loader   show           complete  function             loader   hide           success  function

User · Answer

Use the loading plugin   http   plugins jquery com project loading    loading onAjax  img  loading gif

User · Answer

message   load  index php pg ajaxFlashcard   null  showResponse   showLoad     function showResponse         hideLoad                http   docs jquery com Ajax load urldatacallback

User · Answer

I do this   var preloaderdiv     lt div class  thumbs preloader  gt Loading    lt  div gt                   detail thumbnails   html preloaderdiv                  ajax                           async true                          url    Ajaxification getRandomUser top      sender  css  top      amp lef      sender  css  left                            success function data                                   detail thumbnails   html data

User · Answer

message   load  index php pg ajaxFlashcard   null  showResponse   showLoad     function showResponse         hideLoad                http   docs jquery com Ajax load urldatacallback

User · Answer

I think you are right   This method is too global      However - it is a good default for when your AJAX call has no effect on the page itself   background save for example     you can always switch it off for a certain ajax call by passing  global  false - see documentation at jquery   When the AJAX call is meant to refresh part of the page   I like my  loading  images to be specific to the refreshed section  I would like to see which part is refreshed    Imagine how cool it would be if you could simply write something like         component to refresh   ajax                And this would show a  loading  on this section   Below is a function I wrote that handles  loading  display as well but it is specific to the area you are refreshing in ajax    First  let me show you how to use it    lt  -- assume you have this HTML and you would like to refresh        it   load the content with ajax -- gt    lt span id  email  name  name  class  ajax-loading  gt   lt  span gt    lt  -- then you have the following javascript -- gt      document  ready function             email   ajax   url    my url   load true  global false          And this is the function - a basic start that you can enhance as you wish  it is very flexible    jQuery fn ajax   function options        var  this     this       debugger      function invokeFunc func  arguments                if   typeof func      function                         func  arguments                          function  think  obj  think                 if   think                         obj html   lt div class  loading  style  background  url  public images loading 1 gif  no-repeat  display inline-block  width 70px  height 30px  padding-left 25px   gt  Loading      lt  div gt                       else                       obj find   loading   hide                         function makeMeThink  think                 if    this is   ajax-loading                            think  this think                     else                        think  this  think                        options     extend     options      make options not null - ridiculous  but still         read more about ajax events     var newoptions     extend           beforeSend  function                         invokeFunc options beforeSend  null               makeMeThink true                       complete  function                         invokeFunc options complete               makeMeThink false                      success function result                        invokeFunc options success               if   options load                                  this html result                                   options          ajax newoptions

User · Answer

I think you are right   This method is too global      However - it is a good default for when your AJAX call has no effect on the page itself   background save for example     you can always switch it off for a certain ajax call by passing  global  false - see documentation at jquery   When the AJAX call is meant to refresh part of the page   I like my  loading  images to be specific to the refreshed section  I would like to see which part is refreshed    Imagine how cool it would be if you could simply write something like         component to refresh   ajax                And this would show a  loading  on this section   Below is a function I wrote that handles  loading  display as well but it is specific to the area you are refreshing in ajax    First  let me show you how to use it    lt  -- assume you have this HTML and you would like to refresh        it   load the content with ajax -- gt    lt span id  email  name  name  class  ajax-loading  gt   lt  span gt    lt  -- then you have the following javascript -- gt      document  ready function             email   ajax   url    my url   load true  global false          And this is the function - a basic start that you can enhance as you wish  it is very flexible    jQuery fn ajax   function options        var  this     this       debugger      function invokeFunc func  arguments                if   typeof func      function                         func  arguments                          function  think  obj  think                 if   think                         obj html   lt div class  loading  style  background  url  public images loading 1 gif  no-repeat  display inline-block  width 70px  height 30px  padding-left 25px   gt  Loading      lt  div gt                       else                       obj find   loading   hide                         function makeMeThink  think                 if    this is   ajax-loading                            think  this think                     else                        think  this  think                        options     extend     options      make options not null - ridiculous  but still         read more about ajax events     var newoptions     extend           beforeSend  function                         invokeFunc options beforeSend  null               makeMeThink true                       complete  function                         invokeFunc options complete               makeMeThink false                      success function result                        invokeFunc options success               if   options load                                  this html result                                   options          ajax newoptions

User · Answer

You can just use the jQuery s  ajax function and use its option beforeSend and define some function in which you can show something like a loader div and on success option you can hide that loader div   jQuery ajax       type   POST       url   YOU URL TO WHICH DATA SEND       data  YOUR DATA TO SEND       beforeSend  function                 loaderDiv   show               success  function data                loaderDiv   hide                You can have any Spinning Gif image  Here is a website that is a great AJAX Loader Generator according to your color scheme  http   ajaxload info

User · Answer

loading-image   html   lt img src   images ajax-loader gif  gt  Sending                  ajax               url   uri              cache  false              success  function                        loading-image   html                                            error    function jqXHR  textStatus  errorThrown                var text     Error has occured when submitting the job    jqXHR status    Contact IT dept                  loading-image   html   lt span style  color red  gt   text      lt  span gt

User · Answer

Note that you must use asynchronous calls for spinners to work  at least that is what caused mine to not show until after the ajax call and then swiftly went away as the call had finished and removed the spinner      ajax           url  requestUrl          data  data          dataType   JSON           processData  false          type  requestMethod          async  true                           lt  lt  lt  lt  lt  lt ------ set async to true         accepts   application json           contentType   application json           success  function  restResponse                   something here                    error  function  restResponse                   something here

User · Answer

You can just use the jQuery s  ajax function and use its option beforeSend and define some function in which you can show something like a loader div and on success option you can hide that loader div   jQuery ajax       type   POST       url   YOU URL TO WHICH DATA SEND       data  YOUR DATA TO SEND       beforeSend  function                 loaderDiv   show               success  function data                loaderDiv   hide                You can have any Spinning Gif image  Here is a website that is a great AJAX Loader Generator according to your color scheme  http   ajaxload info

User · Answer

I also want to contribute to this answer  I was looking for something similar in jQuery and this what I eventually ended up using   I got my loading spinner from http   ajaxload info   My solution is based on this simple answer at http   christierney com 2011 03 23 global-ajax-loading-spinners    Basically your HTML markup and CSS would look like this    lt style gt        ajaxSpinnerImage             display  none          lt  style gt    lt div id  ajaxSpinnerContainer  gt        lt img src    Content ajax-loader gif  id  ajaxSpinnerImage  title  working       gt   lt  div gt    And then you code for jQuery would look something like this    lt script gt         document  ready function                  document             ajaxStart function                         ajaxSpinnerImage   show                            ajaxStop function                         ajaxSpinnerImage   hide                             var owmAPI    http   api openweathermap org data 2 5 weather q London uk amp APPID YourAppID               getJSON owmAPI             done function  data                   alert data coord lon                           fail function                     alert  error                            lt  script gt    It is as simple as that

[jquery] How to show loading spinner in jQuery?

Examples related to jquery

Examples related to spinner

Examples related to prototypejs

Examples related to equivalence

Examples related to language-interoperability