Директива ionSpinner предоставляет целый набор анимированных вращающихся элементов (спиннеров).
Вращающиеся иконки позволяют вам организовать с пользователями что-то типа обратной связи, чтобы они видели, что приложение работает/что-то обрабатывает/загружает. Вы можете отображать прохождение какого угодно процесса внутри приложения с помощью вращающейся иконки.
По умолчанию функция ionRefresher  использует этот спиннер, а не вращающиеся шрифтовые иконки (которые раньше были в составе ionicons).
Шрифтовые иконки прекрасно смотрятся вместе с простой графикой или с изображениями разных канцелярских предметов, но они не подходят для анимации более продвинутого уровня, поэтому Ionic теперь использует SVG-графику.

Ionic предлагает 10 готовых спиннеров. По умолчанию будет использоваться тот, который лучше всего подходит для той платформы, на которой он должен запускаться. Директива ionSpinner  динамически создает требуемый SVG-элемент, который позволяет фреймворку Ionic задействовать все десять анимированных SVG, чтобы размер не превышал 3 Кбайт.

В каждом вращающемся элементе (спиннере) используется анимация SVG (SMIL). Но для Android-спиннера также используется JavaScript.
Поэтому спиннеры работают и на  Android 4.0-4.3. Кроме того, каждый спиннер может быть стилизован с помощью CSS
и отмасштабирован до любого размера.

Применение

Применение следующего кода будет запускать дефолтный спиннер для платформы, на которой ему нужно будет запускаться. Если это не iOS и не Android, то по умолчанию будет использоваться ios.

<ion-spinner></ion-spinner>

Установкой атрибута icon  вы можете точно определить, какой спиннер нужно использовать, не обращая внимания на
платформу.

<ion-spinner icon="spiral"></ion-spinner>

Цвета

Как и в случае со многими другими компонентами Ionic, можно менять стиль спиннеров с
помощью стандартных кодов цвета, соответствующих соглашению о назначении имен. Например:

<ion-spinner class="spinner-energized"></ion-spinner>

Создание стиля SVG с помощью CSS

Есть одна очень приятная черта в SVG - это то, что можно менять стиль с помощью CSS! Некоторые свойства имеют разные названия, например, SVG использует термин stroke вместо border и fill вместо background-color.

.spinner svg {
  width: 28px;
  height: 28px;
  stroke: #444;
  fill: #444;
}