UNPKG

ionic-framework

Version:

An advanced HTML5 mobile app framework built on Angular2

120 lines (119 loc) 2.94 kB
import { Config } from '../../config/config'; /** * @name Spinner * @description * The `ion-spinner` component provides a variety of animated SVG spinners. * Spinners enables you to give users feedback that the app is actively * processing/thinking/waiting/chillin’ out, or whatever you’d like it to indicate. * By default, the `ion-refresher` feature uses this spinner component while it's * the refresher is in the `refreshing` state. * * Ionic offers a handful of spinners out of the box, and by default, it will use * the appropriate spinner for the platform on which it’s running. * * <table class="table spinner-table"> * <tr> * <th> * <code>ios</code> * </th> * <td> * <ion-spinner name="ios"></ion-spinner> * </td> * </tr> * <tr> * <th> * <code>ios-small</code> * </th> * <td> * <ion-spinner name="ios-small"></ion-spinner> * </td> * </tr> * <tr> * <th> * <code>bubbles</code> * </th> * <td> * <ion-spinner name="bubbles"></ion-spinner> * </td> * </tr> * <tr> * <th> * <code>circles</code> * </th> * <td> * <ion-spinner name="circles"></ion-spinner> * </td> * </tr> * <tr> * <th> * <code>crescent</code> * </th> * <td> * <ion-spinner name="crescent"></ion-spinner> * </td> * </tr> * <tr> * <th> * <code>dots</code> * </th> * <td> * <ion-spinner name="dots"></ion-spinner> * </td> * </tr> * </table> * * @usage * The following code would use the default spinner for the platform it's * running from. If it's neither iOS or Android, it'll default to use `ios`. * * ```html * <ion-spinner></ion-spinner> * ``` * * By setting the `name` property, you can specify which predefined spinner to * use, no matter what the platform is. * * ```html * <ion-spinner name="bubbles"></ion-spinner> * ``` * * ## Styling SVG with CSS * One cool thing about SVG is its ability to be styled with CSS! One thing to note * is that some of the CSS properties on an SVG element have different names. For * example, SVG uses the term `stroke` instead of `border`, and `fill` instead * of `background-color`. * * ```css * ion-spinner svg { * width: 28px; * height: 28px; * stroke: #444; * fill: #222; * } * ``` */ export declare class Spinner { private _config; private _c; private _l; private _name; private _dur; private _init; private _applied; /** * @input {string} SVG spinner name. */ name: string; /** * @input {string} How long it takes it to do one loop. */ duration: number; /** * @input {string} If the animation is paused or not. Defaults to `false`. */ paused: boolean; constructor(_config: Config); ngOnInit(): void; load(): void; _loadEle(spinner: any, index: number, total: number): any; }