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 = ${
// The text to display in the loading indicator
template: ‘

’ + msg + ‘
hide: function() {

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: