Recently, I integrated angular-loading-bar.js into my project to visually represent the progress of http calls. By default, the blue progress bar appears at the top of the screen. However, I wanted to customize it so that it would appear within a specific div on the page instead.
In a helpful answer, it was suggested to add the following line of code to activate the progress bar:
angular.module('app', ['angular-loading-bar']);
After adding this code, the progress bar continued to display at the top of the screen, rather than within the desired div. Upon inspecting the core angular-loadingbar.js file, I noticed that the progress bar was being inserted using the following 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>';
It's clear that the parent selector is set to body. Is there a way to dynamically change this parentSelector based on the page that is calling the loading bar?
Any assistance on this matter would be greatly appreciated. Thank you in advance!