ion-refresher - spinner not showing

Question

I have a problem with the ion-spinner.

The pulling text and icon are showing up:

But when I release it, the area where the spinner should be stays empty.

My ion-refresher is like this

<ion-refresher
        pulling-text="Pull to refresh..."
        on-refresh="doRefresh()"
        spinner="crescent">
</ion-refresher>

The doRefresh() function

$scope.doRefresh = function() {
    Entry.all().$promise.then(function(data) {
        $scope.logs = data;
        $scope.$broadcast('scroll.refreshComplete');
    });
}

What´s going on?

UPDATE:

I tested every spinner and the only one working is spiral but way too big. Only about half of the spinner is visible

According to the docs http://ionicframework.com/docs/api/directive/ionRefresher/ the ionSpinner should work

Answer 1

if someone else runs into this issue, for me this fixed it:

ion-refresher {
  z-index: 10;
}

Answer 2

Old question, but I experienced the same problem, and I found a solution. The spinner has always been there, but it is white, so you can't see it with a white background. To fix this, add following code to your CSS-file, replacing "skyblue" with your choice of color.

.spinner svg {
  stroke: skyblue;
  fill: skyblue;
}

Also, here is my ion-refresher.

<ion-refresher on-refresh="collectFeed()" pulling-text="Pull to refresh" spinner="ios-small"></ion-refresher>

Answer 3

This is very likely too late, but this happened to me. Basically I had overwritten .spnner svg {} in the css file and forgot. So, all the later loading spinners kept taking the same height and width.