Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Initial loading spinner for AngularJS

I want to show a spinner on the first load of my application like: https://devart.withgoogle.com/

I've attempted to do this via the Services module like so:

angular.module('InitialLoad', [])
    .config(function ($httpProvider) {
        $httpProvider.responseInterceptors.push('myHttpInterceptor');
        var spinnerFunction = function (data, headersGetter) {
            $('#loading').fadeIn();
            return data;
        };
        $httpProvider.defaults.transformRequest.push(spinnerFunction);
    })
    .factory('myHttpInterceptor', function ($q, $window) {
        return function (promise) {
            return promise.then(function (response) {
                $('#loading').fadeOut(function(){
                    $(this).remove();
                });
                return response;
            }, function (response) {
               $('#loading').fadeOut(function(){
                    $(this).remove();
                });
                return $q.reject(response);
            });
        };
    });

But there are a number of things wrong with this... first of which is that this doesn't listen for the first load it listens to EVERY request. It also doesn't show and hide the loading as elegant as the way it's been done on DevArt, and I'm using jQuery to hide and show the loading spinner instead of using Angular Animate.

Can anyone help? To clarify this is for the INITIAL app load! And not for showing a spinner on subsequent requests. I use this for that: https://github.com/chieffancypants/angular-loading-bar but I want to show a splash for the app start up which is different.

like image 843
Cameron Avatar asked Aug 18 '14 12:08

Cameron


People also ask

How to create a spinner in angular?

Required Angular App and Component is created. In component.html file, make an object with id loading. Here spinner is defined as: You can make a spinner your way. In component.css file, give spinner the styles you want.

What is the current version of NGX-spinner in angular?

Currently, Angular is at version 13 and Google is the main maintainer of the project. ngx-spinner is a loading (spinner) component library with more than 50 different types. Before you start, you need to install and configure the tools: 1.

How to get data from API using spinner?

Here spinner is styled as: Fetch the data from API by making get request. After fetching the data from API store it in a Response variable. There is an if statement that checks if Response from API came or not. If Response came then there is a function hideloader () which is called.


1 Answers

If you want to hide your app while AngularJS loads then default your spinner to being displayed using plain HTML, and use ng-cloak to hide the angular portions of the application.

https://docs.angularjs.org/api/ng/directive/ngCloak

Once your app loads you can turn off the spinner using ng-hide/ng-show.

<div ng-controller="TopController">
  <div class="spinner" ng-hide="appLoaded"/>
  <div ng-cloak ng-view>
     ... All Angular view giblets go here...
  </div>
</div>

Here is a working example:

http://jsfiddle.net/kLtzm93x/

like image 176
chubbsondubs Avatar answered Sep 23 '22 16:09

chubbsondubs