0

I recently started using the angular-loading-bar.js to show the progress of the http call on the screen. By default the blue progress bar is displayed at the top of the screen, however instead of it being displayed at the top of the screen, I want it just within a particular div. As shown in this answer to activate the progress bar you just need to add the below line of code,

angular.module('app', ['angular-loading-bar']);

However, on doing this the progress bar gets displayed on the top of the screen, I have a div and I want that progress bar to be displayed within that particular div. When I opened the core angular-loadingbar.js, I found that they are inserting the progress bar using the below lines,

this.parentSelector = 'body';
this.spinnerTemplate = '<div id="loading-bar-spinner"><div class="spinner-icon"></div></div>';
this.loadingBarTemplate = '<div id="loading-bar"><div class="bar"><div class="peg"></div></div></div>';

As you can see the parent selector is the body, is there a way through which I can change this parentSelector from the page from which is calling the loading bar?

Any help is appreciated, thanks in advance!

Community
  • 1
  • 1
Saumil
  • 2,521
  • 5
  • 32
  • 54

2 Answers2

1

I would not use any external library to accomplish just simple loader on the screen. Easiest solution is to create DOM node wherever you like and show it only when some particular flag in $rootScope is true, i. e.:

<div class="my-gif-loader" ng-if="$root.loading">...</div>
IProblemFactory
  • 9,551
  • 8
  • 50
  • 66
0

Position the template:

If you'd like to position the loadingBar or spinner, provide a CSS selector to the element you'd like the template injected into. The default is the <body> element:

angular.module('myApp', ['angular-loading-bar'])
  .config(['cfpLoadingBarProvider', function(cfpLoadingBarProvider) {
    cfpLoadingBarProvider.parentSelector = '#loading-bar-container';
    cfpLoadingBarProvider.spinnerTemplate = '<div><span class="fa fa-spinner">Custom Loading Message...</div>';
  }])


<div id="loading-bar-container"></div>

Taken from the angular-loading-bar documentation on Github

Mr Lister
  • 45,515
  • 15
  • 108
  • 150
shammelburg
  • 6,974
  • 7
  • 26
  • 34
  • 2
    I tried this, but when changing the parentSelector, the bar remains at the top of the window. It changes where the custom loading text is appended, but not the bar itself... – Paulos3000 Jun 03 '16 at 09:38
  • @Paulos3000 Old, but maybe helpful for others. Try editing the css to include `#loading-bar .bar{ top:50%;}` and check the order of your css scripts to make sure it doesnt get overwritten – user153882 Aug 14 '17 at 00:35