ionicLoading

Hi I have implemented loaderService in my app. As follows
.factory(‘LoaderService’, function($rootScope, $ionicLoading) {
// Trigger the loading indicator
return {
show: function(msg) { //code from the ionic framework doc
// Show the loading overlay and text
$rootScope.loading = $ionicLoading.show({
// The text to display in the loading indicator
template: ‘

’ + msg + ‘
’,
//template:“Loading…”
});
},
hide: function() {
$ionicLoading.hide();
}
}
})

I have defined my own css for ionic-logo for alignment and also for the ionic-font which displays the dynamic text at the bottom. Whenever i run this on my nexus tab 10inch i am getting a black line/stripe on the page , it blinks and goes back, i changed my css still it wouldn’t work any help would be much appreciated.I removed the “ionic-logo” and tried with a simple "template:‘Loading…’ ", and i get a big black square box on the device when the loader is coming. I have no idea how to hide it. Any help would be much appreciated.

Can you create a working example for us?

Also, please format your code and read this article if you need a working Ionic template: http://www.gajotres.net/help-us-help-you-how-to-ask-a-good-ionic-forum-question/