Angularjs loading screen on ajax request

Question

Using Angularjs   I need to show a loading screen  a simple spinner  until ajax request is complete  Please suggest any idea with a code snippet

User · Answer

Create a Directive with the show and size attributes ( you can add more also )

    app.directive('loader',function(){
    return {
    restrict:'EA',
    scope:{
        show : '@',
      size : '@'
    },
    template : '<div class="loader-container"><div class="loader" ng-if="show" ng-class="size"></div></div>'
  }
})

and in html use as

 <loader show="{{loader1}}" size="sm"></loader>

In the show variable pass true when any promise is running and make that false when request is completed. Active demo - Angular Loader directive example demo in JsFiddle

User · Answer

You could add a condition and then change it via the rootscope  Before your ajax request  you simply call  rootScope  emit  stopLoader     angular module  directive loading                directive  loading        http     rootScope  function   http   rootScope                        return                   restrict   A                   link  function  scope  elm  attrs                                        scope isNoLoadingForced   false                      scope isLoading   function                              return  http pendingRequests length  gt  0  amp  amp  scope isNoLoadingForced                                               rootScope  on  stopLoader   function                            scope isNoLoadingForced   true                                              scope  watch scope isLoading  function  v                                                if v                               elm show                             else                              elm hide                                                                                                       This is definatly not the best solution but it would still works

User · Answer

I built on  DavidLin s answer a little to simplify it - removing any dependency on jQuery in the directive  I can confirm this works as I use it in a production application  function AjaxLoadingOverlay  http         return           restrict   A           link  function   scope   element   attributes                  scope loadingOverlay   false                scope isLoading   function                      return  http pendingRequests length  gt  0                               scope  watch  scope isLoading  function  isLoading                     scope loadingOverlay   isLoading                                          I use a ng-show instead of a jQuery call to hide show the  lt div gt    Here s the  lt div gt  which I placed just below the opening  lt body gt  tag    lt div ajax-loading-overlay class  loading-overlay  ng-show  loadingOverlay  gt       lt img src  Resources Images LoadingAnimation gif    gt   lt  div gt    And here s the CSS that provides the overlay to block UI while a  http call is being made    loading-overlay       position  fixed      z-index  999      height  2em      width  2em      overflow  show      margin  auto      top  0      left  0      bottom  0      right  0      loading-overlay before       content          display  block      position  fixed      top  0      left  0      width  100       height  100       background-color  rgba 0 0 0 0 3          not  required  hides these rules from IE9 and below     loading-overlay not  required        font  0 0 a      color  transparent      text-shadow  none      background-color  transparent      border  0      CSS credit goes to  Steve Seeger s - his post  https   stackoverflow com a 35470281 335545

User · Answer

In reference of this answer  https   stackoverflow com a 17144634 4146239  For me is the best solution but there s a way to avoid use jQuery    x000D   x000D   directive  loading   function      x000D        return   x000D          restrict   E   x000D          replace true  x000D          template    lt div class  loading  gt  lt img src  http   www nasa gov multimedia videogallery ajax-loader gif  width  20  height  20    gt LOADING    lt  div gt    x000D          link  function  scope  element  attr    x000D                scope  watch  loading   function  val    x000D                    if  val  x000D                        scope loadingStatus    true   x000D                    else x000D                        scope loadingStatus    false   x000D                    x000D            x000D          x000D       x000D   x000D     controller  myController   function  scope   http    x000D         scope cars       x000D         x000D         scope clickMe   function     x000D          scope loadingStatus    true  x000D           http get  test json   x000D             success function data    x000D               scope cars   data 0  cars  x000D               scope loadingStatus    false   x000D              x000D          x000D         x000D        x000D   lt body ng-app  myApp  ng-controller  myController  ng-init  loadingStatus  true   gt  x000D           lt loading ng-show  loadingStatus   gt  lt  loading gt  x000D     x000D           lt div ng-repeat  car in cars  gt  x000D             lt li gt   car name   lt  li gt  x000D           lt  div gt  x000D           lt button ng-click  clickMe    class  btn btn-primary  gt CLICK ME lt  button gt  x000D     x000D   lt  body gt  x000D   x000D   x000D    You need to replace   element  show    and  element  show    with  scope loadingStatus    true   and  scope loadingStatus    false    Than  you need to use this variable to set the ng-show attribute of the element

User · Answer

I use ngProgress for this   Add  ngProgress  to your dependencies once you ve included the script css files in your HTML  Once you do that you can set up something like this  which will trigger when a route change was detected   angular module  app   run function  rootScope  ngProgress       rootScope  on   routeChangeStart   function ev data        ngProgress start             rootScope  on   routeChangeSuccess   function ev data        ngProgress complete                For AJAX requests you can do something like this    scope getLatest   function          ngProgress start          http get   latest-goodies             success function data status                  scope latest   data               ngProgress complete                          error function data status                 ngProgress complete                      Just remember to add  ngProgress  to the controllers dependencies before doing so  And if you are doing multiple AJAX requests use an incremental variable in the main app scope to keep track when your AJAX requests have finished before calling  ngProgress complete

User · Answer

using pendingRequests is not correct because as mentioned in Angular documentation  this property is primarily meant to be used for debugging purposes   What I recommend is to use an interceptor to know if there is any active Async call    module config    httpProvider   function   httpProvider         httpProvider interceptors push function   q   rootScope            if   rootScope activeCalls    undefined                 rootScope activeCalls   0                     return               request  function  config                     rootScope activeCalls    1                  return config                             requestError  function  rejection                     rootScope activeCalls -  1                  return rejection                             response  function  response                     rootScope activeCalls -  1                  return response                             responseError  function  rejection                     rootScope activeCalls -  1                  return rejection                                          and then check whether activeCalls is zero or not in the directive through a  watch   module directive  loadingSpinner   function   http        return           restrict   A           replace  true          template    lt div class  loader unixloader  data-initialize  loader  data-delay  500  gt  lt  div gt            link  function  scope  element  attrs                 scope  watch  activeCalls   function  newVal  oldVal                    if  newVal    0                          element  hide                                      else                         element  show

User · Answer

Here simple interceptor example  I set mouse on wait when ajax starts and set it to auto when ajax ends    httpProvider interceptors push function  document    return     request   function config            here ajax start         here we can for example add some class or show somethin       document find  body   css  cursor   wait          return config           response   function response            here ajax ends        here we should remove classes added on request start        document find  body   css  cursor   auto          return response               Code has to be added in application config app config  I showed how to change mouse on loading state but in there it is possible to show hide any loader content  or add  remove some css classes which are showing the loader   Interceptor will run on every ajax call  so no need to create special boolean variables    scope loading true false etc    on every http call   Interceptor is using builded in angular jqLite https   docs angularjs org api ng function angular element so no Jquery needed

User · Answer

If you are using Restangular  which is awesome  you can create an animation during api calls  Here is my solution  Add a response interceptor and a request interceptor that sends out a rootscope broadcast  Then create a directive to listen for that response and request             angular module  mean system      factory  myRestangular    Restangular    rootScope   function Restangular  rootScope        return Restangular withConfig function RestangularConfigurer          RestangularConfigurer setBaseUrl  http   localhost 3000 api          RestangularConfigurer addResponseInterceptor function data  operation  what  url  response  deferred            var extractedData                to look for getList operations         if  operation      getList                     and handle the data and meta data           extractedData   data data            extractedData meta   data meta            else             extractedData   data data                     rootScope  broadcast  apiResponse            return extractedData                  RestangularConfigurer setRequestInterceptor function  elem  operation            if  operation      remove               return null                    return  elem  amp  amp  angular isObject elem data     elem    data  elem                   RestangularConfigurer setRestangularFields           id    id                  RestangularConfigurer addRequestInterceptor function element  operation  what  url             rootScope  broadcast  apiRequest            return element                             Here is the directive           angular module  mean system      directive  smartLoadingIndicator   function  rootScope        return         restrict   AE         template    lt div ng-show  isAPICalling  gt  lt p gt  lt i class  fa fa-gear fa-4x fa-spin  gt  lt  i gt  amp nbsp Loading lt  p gt  lt  div gt          replace  true        link  function scope  elem  attrs            scope isAPICalling   false            rootScope  on  apiRequest   function               scope isAPICalling   true                       rootScope  on  apiResponse   function               scope isAPICalling   false

User · Answer

Use angular-busy   Add cgBusy as to your app   module   angular module  your app     cgBusy       Add your promise to scope   function MyCtrl  http  User        using  http   this isBusy    http get             if you have a User class based on  resource   this isBusy   User  save        In your html template    lt div cg-busy   ctrl isBusy  gt  lt  div gt

User · Answer

Instead of setting up a scope variable to indicate data loading status  it is better to have a directive does everything for you   angular module  directive loading             directive  loading        http   function   http                return               restrict   A               link  function  scope  elm  attrs                                scope isLoading   function                          return  http pendingRequests length  gt  0                                      scope  watch scope isLoading  function  v                                        if v                           elm show                         else                          elm hide                                                                                   With this directive  all you need to do is to give any loading animation element an  loading  attribute    lt div class  loading-spiner-holder  data-loading  gt  lt div class  loading-spiner  gt  lt img src         gt  lt  div gt  lt  div gt    You can have multiple loading spinners on the page  where and how to layout those spinners is up to you and directive will simply turn it on off for you automatically

User · Answer

The best way to do this is to use response interceptors along with custom directive  And the process can further be improved using pub sub mechanism using  rootScope  broadcast  amp   rootScope  on methods   As the whole process is documented in a well written blog article  I m not going to repeat that here again  Please refer to that article to come up with your needed implementation

User · Answer

Typescript and Angular Implementation   directive       void  gt         use strict       angular module  app   directive  busyindicator   busyIndicator       function busyIndicator  http ng IHttpService   ng IDirective           var directive    lt ng IDirective gt               restrict   A               link scope  Scope IBusyIndicatorScope                    scope anyRequestInProgress        gt    http pendingRequests length  gt  0                   scope  watch scope anyRequestInProgress  x   gt                                    if  x                            scope canShow   true                        else                           scope canShow   false                                                                             return directive                Scope     module App Scope           export interface IBusyIndicatorScope extends angular IScope               anyRequestInProgress  any              canShow  boolean                      Template   lt div id  activityspinner  ng-show  canShow  class  show  data-busyindicator gt   lt  div gt   CSS  activityspinner       display   none     activityspinner show       display   block      position   fixed      z-index  100      background-image   url  data image gif base64 R0lGODlhNgA3APMAAPz8 GZmZqysrHV1dW1tbeXl5ZeXl fn59nZ2ZCQkLa2tgAAAAAAAAAAAAAAAAAAACH C05FVFNDQVBFMi4wAwEAAAAh hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh QQJCgAAACwAAAAANgA3AAAEzBDISau9OOvNu 9gKI5kaZ4lkhBEgqCnws6EApMITb93uOqsRC8EpA1Bxdnx8wMKl51ckXcsGFiGAkamsy0LA9pAe1EFqRbBYCAYXXUGk4DWJhZN4dlAlMSLRW80cSVzM3UgB3ksAwcnamwkB28GjVCWl5iZmpucnZ4cj4eWoRqFLKJHpgSoFIoEe5ausBeyl7UYqqw9uaVrukOkn8LDxMXGx8ibwY6 JLxydCO3JdMg1dJ Is E0SPLcs3Jnt F28XXw jC5uXh4u89EQAh QQJCgAAACwAAAAANgA3AAAEzhDISau9OOvNu 9gKI5kaZ5oqhYGQRiFWhaD6w6xLLa2a iiXg8YEtqIIF7vh QcarbB4YJIuBKIpuTAM0wtCqNiJBgMBCaE0ZUFCXpoknWdCEFvpfURdCcM8noEIW82cSNzRnWDZoYjamttWhphQmOSHFVXkZecnZ6foKFujJdlZxqELo1AqQSrFH1 TbEZtLM9shetrzK7qKSSpryixMXGx8jJyifCKc1kcMzRIrYl1Xy4J9cfvibdIs MwMue4cffxtvE6qLoxubk8ScRACH5BAkKAAAALAAAAAA2ADcAAATOEMhJq7046827 2AojmRpnmiqrqwwDAJbCkRNxLI42MSQ6zzfD0Sz4YYfFwyZKxhqhgJJeSQVdraBNFSsVUVPHsEAzJrEtnJNSELXRN2bKcwjw19f0QG7PjA7B2EGfn FhoeIiYoSCAk1CQiLFQpoChlUQwhuBJEWcXkpjm4JF3w9P5tvFqZsLKkEF58 omiksXiZm52SlGKWkhONj7vAxcbHyMkTmCjMcDygRNAjrCfVaqcm11zTJrIjzt64yojhxd G28XqwOjG5uTxJhEAIfkECQoAAAAsAAAAADYANwAABM0QyEmrvTjrzbv YCiOZGmeaKqurDAMAlsKRE3EsjjYxJDrPN8PRLPhhh8XDMk0KY OF5TIm4qKNWtnZxOWuDUvCNw7kcXJ6gl7Iz1T76Z8Tq b7 i8qmCoGQoacT8FZ4AXbFopfTwEBhhnQ4w2j0GRkgQYiEOLPI6ZUkgHZwd6EweLBqSlq6ytricICTUJCKwKkgojgiMIlwS1VEYlspcJIZAkvjXHlcnKIZokxJLG0KAlvZfAebeMuUi7FbGz2z Rq8jozavn7Nev8CsRACH5BAkKAAAALAAAAAA2ADcAAATLEMhJq7046827 2AojmRpnmiqrqwwDAJbCkRNxLI42MSQ6zzfD0Sz4YYfFwzJNCmPzheUyJuKijVrZ2cTlrg1LwjcO5HFyeoJeyM9U  mfE6v2  4PD6O5F YWiqAGWdIhRiHP4kWg0ONGH4 kXqUlZaXmJlMBQY1BgVuUicFZ6AhjyOdPAQGQF0mqzauYbCxBFdqJao8rVeiGQgJNQkIFwdnB0MKsQrGqgbJPwi2BMV5wrYJetQ129x62LHaedO21nnLq82VwcPnIhEAIfkECQoAAAAsAAAAADYANwAABMwQyEmrvTjrzbv YCiOZGmeaKqurDAMAlsKRE3EsjjYxJDrPN8PRLPhhh8XDMk0KY OF5TIm4qKNWtnZxOWuDUvCNw7kcXJ6gl7Iz1T76Z8Tq b7 g8Po7kX9haKoAZZ0iFGIc iRaDQ40Yfj RepSVlpeYAAgJNQkIlgo8NQqUCKI2nzNSIpynBAkzaiCuNl9BIbQ1tl0hraewbrIfpq6pbqsioaKkFwUGNQYFSJudxhUFZ9KUz6IGlbTfrpXcPN6UB2cHlgfcBuqZKBEAIfkECQoAAAAsAAAAADYANwAABMwQyEmrvTjrzbv YCiOZGmeaKqurDAMAlsKRE3EsjjYxJDrPN8PRLPhhh8XDMk0KY OF5TIm4qKNWtnZxOWuDUvCNw7kcXJ6gl7Iz1T76Z8Tq b7yJEopZA4CsKPDUKfxIIgjZ P3EWe4gECYtqFo82P2cXlTWXQReOiJE5bFqHj4qiUhmBgoSFho59rrKztLVMBQY1BgWzBWe8UUsiuYIGTpMglSaYIcpfnSHEPMYzyB8HZwdrqSMHxAbath2MsqO0zLLorua05OLvJxEAIfkECQoAAAAsAAAAADYANwAABMwQyEmrvTjrzbv YCiOZGmeaKqurDAMAlsKRE3EsjjYxJDrPN8PRLPhfohELYHQuGBDgIJXU0Q5CKqtOXsdP0otITHjfTtiW2lnE37StXUwFNaSScXaGZvm4r0jU1RWV1hhTIWJiouMjVcFBjUGBY4WBWw1A5RDT3sTkVQGnGYYaUOYPaVip3MXoDyiP3k3GAeoAwdRnRoHoAa5lcHCw8TFxscduyjKIrOeRKRAbSe3I9Um1yHOJ9sjzCbfyInhwt3E2cPo5dHF5OLvJREAOwAAAAAAAAAAAA          -ms-opacity   0 4      opacity   0 4      background-repeat   no-repeat      background-position   center      left   0      bottom   0      right   0      top   0

User · Answer

Here s an example  It uses the simple ng-show method with a bool   HTML   lt div ng-show  loading  class  loading  gt  lt img src       gt LOADING    lt  div gt   lt div ng-repeat  car in cars  gt     lt li gt   car name   lt  li gt   lt  div gt   lt button ng-click  clickMe    class  btn btn-primary  gt CLICK ME lt  button gt    ANGULARJS     scope clickMe   function          scope loading   true       http get  test json          success function data             scope cars   data 0  cars           scope loading   false                Of course you can move the loading box html code into a directive  then use  watch on  scope loading  In which case   HTML    lt loading gt  lt  loading gt    ANGULARJS DIRECTIVE      directive  loading   function            return           restrict   E           replace true          template    lt div class  loading  gt  lt img src        gt LOADING    lt  div gt            link  function  scope  element  attr                  scope  watch  loading   function  val                      if  val                          element  show                      else                         element  hide                                               PLUNK  http   plnkr co edit AI1z21 p preview

User · Answer

Also  there is a nice demo that shows how can you use Angularjs animation in your project   The link is here  See the top left corner    It s an open source  Here is the link to download  And here is the link for tutorial   My point is  go ahead and download the source files and then see how they have implemented the spinner  They might have used a little better aproach  So  checkout this project

User · Answer

Include this in your  app config      httpProvider interceptors push  myHttpInterceptor      And add this code   app factory  myHttpInterceptor   function   q   window  rootScope         rootScope ActiveAjaxConectionsWithouthNotifications   0      var checker   function parameters status                 YOU CAN USE parameters url TO IGNORE SOME URL             if status     request                     rootScope ActiveAjaxConectionsWithouthNotifications  1                      loading view   show                              if status     response                     rootScope ActiveAjaxConectionsWithouthNotifications- 1                             if  rootScope ActiveAjaxConectionsWithouthNotifications lt  0                    rootScope ActiveAjaxConectionsWithouthNotifications 0                      loading view   hide                            return        request   function config            checker config  request            return config             requestError   function rejection           checker rejection config  request          return  q reject rejection               response   function response             checker response config  response          return response             responseError   function rejection            checker rejection config  response          return  q reject rejection

[angularjs] Angularjs loading screen on ajax request

Examples related to angularjs

Examples related to angularjs-directive