ion-spinner

多种旋转加载的动画图标。当你的界面加载时或者是耗时处理时,你就可以呈现给用户相应的加载图标。营造良好的体验。

字体图标非常适合作为简单或静止的图像,但它们不适合作为动画,这就是为什么ionic使用SVG。

ionSpinner指令会动态生成SVG元素,ionic框架提供10个SVG动画。

android
ios
ios-small
bubbles
circles
crescent
dots
lines
ripple
spiral

加载使用SVG和SMIL动画,可以用CSS自定义样式和尺寸。

实例该文档来自ionic中文网ionic-china

简单使用代码。默认使用ios图标。

<ion-spinner></ion-spinner>

设置icon图标属性,指定要使用的图标。没有平台区分。

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

加载动画颜色

像大部分其他的ionic组件一样,spinner也可以使用ionic的标准颜色命名规则,就像下面这样:

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

为SVG赋予CSS样式

SVG的优点是可以定义CSS样式,属性有特殊的名称,例如使用stroke代替borderfill代替background-color

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