CODEWITHSUNDEEP
angularjs
alvin manarya
alvin manarya

Reputation: 21

How to show a progress bar in AngularJS

i'm kind of new using AngularJs framework and i am not that good in English. so i hope somebody can help me solve my problem and never mind my grammar hehe. i know mostly of progress bar in angularjs triggered by ng-show, but what if i want to put a progress bar before an object tag loads. for example

    <div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="70"
   aria-valuemin="0" aria-valuemax="100" style="width:70%">
    <object width="400" height="400" data="file.pdf"></object>
  </div>
</div>

let assume that that "file.pdf" is being fetch from the server. that being said it needs time to load, so i want to put a progress bar on that time while the data if being fetch from the server and hide it when the object is fully loaded thank you guys.

data flow example : (file.pdf) ----Fetching---- [controller]----Progress bar--View(html)

Upvotes: 2

Views: 18800

Answers (4)

elfan
elfan

Reputation: 1131

I think the problem is not just about showing/hiding the progress bar, perhaps it is about how to hide the progress bar when the <object>'s content finish loading.

Initially, I tried to use ng-load on the <object> but somehow it didn't work. So I tried to use onload which does work. But since the onLoad() handler function is outside angular environment, I had to get back the angular scope to be able to set the variable $scope.showProgress that will hide the progress bar. See the plunkr yourself, and let me know if that is what you are looking for.

Plunkr https://plnkr.co/edit/wxgetLZdST0WcPEHyraZ

Note: I don't know whether it is possible to get the progress status number (% loaded), but at least we can show "Loading..." or a spinner icon while the <object> is loading.

Upvotes: 1

Nitheesh
Nitheesh

Reputation: 19986

Hope this will help you out. This is a basic example for showing and hiding a spinner bar on button click.

<!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Welcome to LearnKode - A code learning platform</title>
          <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
		  <style>
			.loader {
				border: 16px solid #f3f3f3; /* Light grey */
				border-top: 16px solid #3498db; /* Blue */
				border-radius: 50%;
				width: 120px;
				height: 120px;
				animation: spin 2s linear infinite;
				margin: 0 auto;
			}

			@keyframes spin {
				0% { transform: rotate(0deg); }
				100% { transform: rotate(360deg); }
			}
			html, body, container {
				height: 100%;
				width: 100%;
				margin: 0;
			}
		  </style>
    </head>
    <body ng-app="changeExample">
        <div class="container" ng-controller="ExampleController">
			<button class="btn" ng-click="ShowSpinner()">Show Spinner</button>
			<button class="btn" ng-click="HideSpinner()">Hide Spinner</button>
            <div ng-if="ShowSpinnerStatus" class="loader"></div>
        </div>
        <script>
			var app = angular.module("changeExample", []);
			app.controller('ExampleController', ['$scope', function ($scope) {
				$scope.ShowSpinnerStatus = true;
				
				$scope.ShowSpinner = function(){
					$scope.ShowSpinnerStatus = true;
				};
				$scope.HideSpinner = function(){
					$scope.ShowSpinnerStatus = false;
				};
			}]);
		</script>
    </body>
    </html>

You can show and hide the spinner on a service call like this.

        $scope.ShowSpinner();
        LoginService.authenticateUser(userName, password).then(
            function(response){
                $scope.HideSpinner();
                if( response.isSuccess ){
                    // Login Success
                }
                else{
                    //Login Fail

                }
            },
            function(error){
                //Network related error
                $scope.HideSpinner();
            }
        );

Upvotes: 2

Nikhil Mohanan
Nikhil Mohanan

Reputation: 1260

http://chieffancypants.github.io/angular-loading-bar/

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

angular-loading-bar is a good option for $http calls

Upvotes: 0

sisyphus
sisyphus

Reputation: 462

Your English is really good and you need not worry about it at all. Coming back to your question, you are on the right path. You would need to use ng-show or ng-hide, whatever you choose. Let's say you choose ng-show In your controller, you would declare a variable,

$scope.isProgessBarVisible = true;

and then, within the controller itself, upon return from http call from the server, you would set it to false.

$http.get('someUrl')
 .then(function successCallback(response) {
 //load you pdf file content
 $scope.isProgessBarVisible = false;
}

And in the HTML

<div class="progress">
  <div class="progress-bar" role="progressbar" ng-show="isProgessBarVisible" aria-valuenow="70"
   aria-valuemin="0" aria-valuemax="100" style="width:70%">
   <object width="400" height="400" data="file.pdf"></object>
  </div>

With this in place, the progress bar will show up until the file is fetched from server and displayed.

Upvotes: 1

Related Questions