How to work with insertion of large data into sq lite?

Today, i want to ask help about an architectural problem that i have confronted. I have large data set which equals to approx. 12-13mb ( JSON file we can say ) , i have to insert all rows in it so that people use the application when the internet connection goes off. My problem is that i can put a loading spinner and prevent possible actions by user while downloading the data with AjaxService but i cannot put a loading spinner while insertion and i also want to find the time the insertion process took. Which path should i follow ?

This is my Database factory.

.factory('DB', function ($ionicPopup, $cordovaSQLite, $q, $ionicPlatform, $cordovaNetwork) {
		var self = this;
		self.query = function (query, parameters) {
			parameters = parameters || [];
			var q = $q.defer();
			$ionicPlatform.ready(function () {
				$cordovaSQLite.execute(db, query, parameters)
					.then(function (result) {
						q.resolve(result);
					}, function (error) {
						alert('I found an error' + error.message);
						q.reject(error);
					});
			});
			return q.promise;
		}
		// Proces a result set
		self.getAll = function (result) {
			var output = [];

			for (var i = 0; i < result.rows.length; i++) {
				output.push(result.rows.item(i));
			}
			return output;
		}
		// Proces a single result
		self.getById = function (result) {
			var output = null;
			output = angular.copy(result.rows.item(0));
			return output;
		}
		return self;
	})

and this is the way i handle both downloading and insert .

asyncService.loadDataFromUrls(urLs).then(function(result){
          // First , i delete whole tables and fill them again. Here only we have one table in this example but in my project, i ll have 6 tables.
          DB.query("DELETE FROM INVCARDS");

          alert(Array.isArray(result));
          result.forEach(function(rows){
            if( rows.url == "url demanded" ) {
            rows.data.forEach(function(entry){
              	var parameters = [some parameters ];
                return DB.query("INSERT INTO INVCARDS (COVAT) VALUES(?,?,?,?,?,?,?,?,?)", parameters);
                 }
            })
          })

        },function(err){
          alert("Errr ! : "+err.message);
          console.log("error");
        },function(updates){
          alert("updates");
          console.log("updates"+updates);
        })

and this is the service

.service('asyncService', function($http, $q) {
      return {
        loadDataFromUrls: function(urls) {
		  alert("I am inside new Service "); 
          var deferred = $q.defer();
          var urlCalls = [];
          angular.forEach(urls, function(url) {
            urlCalls.push($http.get(url.url));
          });
          // they may, in fact, all be done, but this
          // executes the callbacks in then, once they are
          // completely finished.
          $q.all(urlCalls)
          .then(
            function(results) {
            deferred.resolve(results) 
          },
          function(errors) {
			  console.log(errors);
            deferred.reject(errors);
          },
          function(updates) {
			  console.log(updates);
            deferred.update(updates);
          });
          return deferred.promise;
        }
      };
    })