123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127 |
- import { ElementRef, Renderer } from '@angular/core';
- import { Config } from '../../config/config';
- import { Ion } from '../ion';
- /**
- * @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 * {
- * width: 28px;
- * height: 28px;
- * stroke: #444;
- * fill: #222;
- * }
- * ```
- */
- export declare class Spinner extends Ion {
- _c: any[];
- _l: any[];
- _name: string;
- _dur: number;
- _init: boolean;
- _paused: boolean;
- /**
- * @input {string} SVG spinner name.
- */
- name: string;
- /**
- * @input {string} How long it takes it to do one loop.
- */
- duration: number;
- /**
- * @input {boolean} If true, pause the animation.
- */
- paused: boolean;
- constructor(config: Config, elementRef: ElementRef, renderer: Renderer);
- /**
- * @hidden
- */
- ngOnInit(): void;
- /**
- * @hidden
- */
- load(): void;
- _loadEle(spinner: any, index: number, total: number): any;
- }
|