I've been upgrading Ionic v1 to v3. It's almost done. But I am not making any progress because of one problem. It's just create a refreshingSpinner like the following video.
https://www.dropbox.com/s/h820nz759bcqhvn/refresher-spinner.mov?dl=0
And here is the video which I've used the default spinner.
Hope to get a good solution for this trouble.
So according to ionic's documentation you can customize the refresher's template by introducing your own template inside "ion-refresher" tags:
<ion-refresher (ionRefresh)="loadData($event)">
// your own customized view goes in here
</ion-refresher>
Basically you can do something like this:
<ion-content padding>
<ion-refresher (ionRefresh)="loadData($event)">
// your custom code goes here:
<div style="width: 100%; height: 64px; margin: auto">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 100 100" xml:space="preserve">
<svg:rect fill="#aaa" stroke="#eee" stroke-width="4" x="25" y="25" width="50" height="50"></svg:rect>
</svg>
</div>
// end of your custom code
</ion-refresher>
<h2>{{header}}</h2>
<p>
This starter project comes with simple tabs-based layout for apps that are going to primarily use a Tabbed UI.
</p>
<p>
Take a look at the <code>pages/</code> directory to add or change tabs,
update any existing page or create new pages.
</p>
</ion-content>
See code here: https://stackblitz.com/edit/ionic-jtupjr
You can also check the source code for the refresher content component to understand how Ionic creates it and recreate yours: