How to render ion-refresher icon while refreshing the list?

Question

I am developing ionic application and trying to implement pull to refresh feature. Here, when I try to pull, ion-refresher is not showing up icons/text instead page goes blank and grey background becomes visible. But on-refresh function is called.

<ion-nav-bar class="bar-positive">
    <ion-nav-buttons side="left">
        <button class="button button-icon icon  ion-chevron-left"></button>
    </ion-nav-buttons>
 </ion-nav-bar>
<ion-content id='yammer_message'>

    <ion-scroll direction="y" delegate-handle="mainScroll" ng-style="{'height': scroll.height}">
        <ion-refresher on-refresh="doRefresh()"
                       pulling-text="Pull to refresh..."
                       refreshing-text="Refreshing!"
                       refreshing-icon="ion-loading-c">

        </ion-refresher>

        <ion-list>
            <ion-item class="item-avatar item-borderless" type="item-text-wrap" ng-repeat="message in messages">
                <img ng-src="{{message.image_url}}" style='border-radius:0%'>
                <h2 style='color:red'>{{message.message_sender_name}}</h2>
                <p style='white-space:normal'>{{message.body.plain}}</p>
            </ion-item>
    </ion-list>

    </ion-scroll>
</ion-content>

<ion-footer-bar class="bar bar-footer" style='border-top:1px solid grey' >
    <form ng-submit="submit()">
        <input type='text' placeholder='Write a comment' ng-model='yammer.comment' style='color:black'>
    </form>
</ion-footer-bar>
</ion-view>

Help is appreciated !

Answer 1

Try to put this in a controller.

                $scope.doRefresh = function() {
                if (something) {
                    $ionicLoading.show({
                        template: '<ion-spinner></ion-spinner>' + 'Refreshing!'
                    });
                    $timeout(function() {
                        //get some data
                        //Stop the ion-refresher from spinning
                        $scope.$broadcast('scroll.refreshComplete');
                        $ionicLoading.hide();
                    }, 1000);
                } else {
                    //
                     }
                }

More about $ionicLoading.

Answer 2

Old question, but I will still answer it. If it just that your icon and text doesn't show up, the CSS might be wrong. Please use this code to stylize your spinner and text:

.spinner svg {
    stroke: #000;
    fill: #000;
}

.ionic-refresher-content {
    color: #000 !important;
}

This will make both the spinner and the text black.

Answer 3

My solution is <ion-refresher> tag should be next to <ion-content> tag. like this,

<ion-content> <ion-refresher (ionRefresh)="doRefresh($event)"> ... </ion-refresher>