Angularjs progress bar implementation

Question

I have implemented a http get method in my controller to get data from a json and display in my view. I want to implement a progress bar. I've implemented one but the progress bar is running even after the data is loaded. How to show the progress bar before the data is loaded and finish it after the data is loaded.

My controller

 .controller('firstCtrl', ['$scope', '$http', 'ngProgressFactory', function ($scope, $http, ngProgressFactory) {


                $scope.progressbar = ngProgressFactory.createInstance();

                $http.get('https://feeds.citibikenyc.com/stations/stations.json').
                        success(function (data, status, headers, config) {

                            $scope.progressbar.start();


                            $scope.data = data; //first get the full object
                            $scope.mainArray = data.stationBeanList; 

                            $timeout($scope.progressbar.complete(), 100);

                        }).
                        error(function (data, status, headers, config) {
                            // called asynchronously if an error occurs
                            // or server returns response with an error status.
                        });
            }]);

Answer 1

Since http request are most likely fast, I think your solution is not the best.

If I were you, I would display loading icon when the http request start and then display a message/notification/whatever when it's done.

You can use font-awesome for that :

Animated Icons

Example :

<div ng-show="isLoading">
<i class="fa fa-spinner fa-spin fa-3x fa-fw"></i>
    <span class="sr-only">Loading...</span>
</div>

and

.controller('firstCtrl', ['$scope', '$http', 'ngProgressFactory', function ($scope, $http, ngProgressFactory) {


                $scope.isLoading = null;

                $http.get('https://feeds.citibikenyc.com/stations/stations.json').
                        success(function (data, status, headers, config) {

                            $scope.isLoading = 'done';


                            $scope.data = data; //first get the full object
                            $scope.mainArray = data.stationBeanList; 

                            $timeout($scope.progressbar.complete(), 100);

                        }).
                        error(function (data, status, headers, config) {
                            // called asynchronously if an error occurs
                            // or server returns response with an error status.
                        });
            }]);