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.
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.
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.
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.
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/
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With