current community

your communities

more stack exchange communities

Stack Exchange
tour help
careers 2.0
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 1 down vote favorite

How to display the loading Icon or loading Progress bar using angularjs. I mean something like this which used in jquery $("body").addClass("loading");, $("body").removeClass("loading");, I saw some links for progress bar which is of like youtube loading bar but i don't want like that I want simple progress bar or loading iage or loading icon or loading bar which show bar moving from module to module, tabs to tabs. Is there any link or function which explain clearly how to use it.

share|improve this question
    
see also stackoverflow.com/questions/15033195/… –  AardVark71 Apr 9 at 12:35
    
I need a simple something like this github.com/voronianski/ngprogress-lite#ngprogress-lite but the problem with this it is showing like youtube way –  Cathy Apr 9 at 12:56
    
Not sure I understand your issue, but you could try to look at a similar loading progress bar like this one: github.com/chieffancypants/angular-loading-bar (since Angular Loading bar uses interceptors you might also want to check out stackoverflow.com/questions/18743656/… ) –  AardVark71 Apr 9 at 13:21

2 Answers 2

up vote 1 down vote

if you dont want to implement it yourself, below are few links.

angular-spinner or angular-sham-spinner

also read this BLOG which details how the spinner works with angularjs

EDIT as per comments

app.directive("spinner", function(){
return: {
restrict: 'E',
scope: {enable:"="},
template: <div class="spinner" ng-show="enable"><img src="content/spinner.gif"></div>
}
});

i havent tested the code but directive wont be more complex than this...

share|improve this answer
    
both links are good but they are using $http, i don't want to use $http –  Cathy Apr 9 at 12:12
    
i think then you will have to write a custom directive... which receives a boolean to show or hide the spinner... thats all it would take...too simple –  HarishR Apr 9 at 12:16
up vote 1 down vote

View

<div ng-show="loader.loading">Loading</div>

Controller

$scope.loader.loading = true;  // false

Add this also on top of your controller

  $scope.loader = { 

              loading : false ,

             };

Show and hide loading bar

share|improve this answer
    
Can we show image, gif @prash –  Cathy Apr 9 at 10:24
    
Can't read property loading undefined error is coming like this –  Cathy Apr 9 at 10:29
    
set this $scope.loader= { loading : false; }; in your controller –  prash Apr 9 at 10:39

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.