import { ChangeDetectionStrategy , Component , ElementRef , Input , Renderer , ViewEncapsulation } from '@angular/core' ; import { Config } from '../../config/config' ; import { Ion } from '../ion' ; import { isTrueProperty } from '../../util/util' ; name description usage @ Component ( { selector : 'ion-spinner' , template : '<svg viewBox="0 0 64 64" *ngFor="let i of _c" [ngStyle]="i.style">' + '<circle [attr.r]="i.r" transform="translate(32,32)"></circle>' + '</svg>' + '<svg viewBox="0 0 64 64" *ngFor="let i of _l" [ngStyle]="i.style">' + '<line [attr.y1]="i.y1" [attr.y2]="i.y2" transform="translate(32,32)"></line>' + '</svg>' , host : { '[class.spinner-paused]' : '_paused' } , changeDetection : ChangeDetectionStrategy . OnPush , encapsulation : ViewEncapsulation . None , } ) export class Spinner extends Ion { _c : any [ ] ; _l : any [ ] ; _name : string ; _dur : number = null ; _init : boolean ; _paused : boolean = false ; input @ Input ( ) get name ( ) : string { return this . _name ; } set name ( val ) { this . _name = val ; this . load ( ) ; } input @ Input ( ) get duration ( ) : number { return this . _dur ; } set duration ( val ) { this . _dur = val ; this . load ( ) ; } input @ Input ( ) get paused ( ) : boolean { return this . _paused ; } set paused ( val ) { this . _paused = isTrueProperty ( val ) ; } constructor ( config , elementRef , renderer ) { super ( config , elementRef , renderer , 'spinner' ) ; } hidden ngOnInit ( ) { this . _init = true ; this . load ( ) ; } hidden load ( ) { if ( this . _init ) { this . _l = [ ] ; this . _c = [ ] ; var name = this . _name || this . _config . get ( 'spinner' , 'ios' ) ; const spinner = SPINNERS [ name ] ; if ( spinner ) { if ( spinner . lines ) { for ( let i = 0 , l = spinner . lines ; i < l ; i ++ ) { this . _l . push ( this . _loadEle ( spinner , i , l ) ) ; } } else if ( spinner . circles ) { for ( let i = 0 , l = spinner . circles ; i < l ; i ++ ) { this . _c . push ( this . _loadEle ( spinner , i , l ) ) ; } } this . setElementClass ( `spinner-${ name }` , true ) ; this . setElementClass ( `spinner-${ this . _mode }-${ name }` , true ) ; } } } _loadEle ( spinner , index , total ) { let duration = this . _dur || spinner . dur ; let data = spinner . fn ( duration , index , total ) ; data . style . animationDuration = duration + 'ms' ; return data ; } } const SPINNERS = { ios : { dur : 1000 , lines : 12 , fn : function ( dur , index , total ) { const transform = 'rotate(' + ( 30 * index + ( index < 6 ? 180 : - 180 ) ) + 'deg)' ; const animationDelay = - ( dur - ( ( dur / total ) * index ) ) + 'ms' ; return { y1 : 17 , y2 : 29 , style : { transform : transform , webkitTransform : transform , animationDelay : animationDelay , webkitAnimationDelay : animationDelay } } ; } } , 'ios-small' : { dur : 1000 , lines : 12 , fn : function ( dur , index , total ) { const transform = 'rotate(' + ( 30 * index + ( index < 6 ? 180 : - 180 ) ) + 'deg)' ; const animationDelay = - ( dur - ( ( dur / total ) * index ) ) + 'ms' ; return { y1 : 12 , y2 : 20 , style : { transform : transform , webkitTransform : transform , animationDelay : animationDelay , webkitAnimationDelay : animationDelay } } ; } } , bubbles : { dur : 1000 , circles : 9 , fn : function ( dur , index , total ) { const animationDelay = - ( dur - ( ( dur / total ) * index ) ) + 'ms' ; return { r : 5 , style : { top : ( 9 * Math . sin ( 2 * Math . PI * index / total ) ) + 'px' , left : ( 9 * Math . cos ( 2 * Math . PI * index / total ) ) + 'px' , animationDelay : animationDelay , webkitAnimationDelay : animationDelay } } ; } } , circles : { dur : 1000 , circles : 8 , fn : function ( dur , index , total ) { const animationDelay = - ( dur - ( ( dur / total ) * index ) ) + 'ms' ; return { r : 5 , style : { top : ( 9 * Math . sin ( 2 * Math . PI * index / total ) ) + 'px' , left : ( 9 * Math . cos ( 2 * Math . PI * index / total ) ) + 'px' , animationDelay : animationDelay , webkitAnimationDelay : animationDelay } } ; } } , crescent : { dur : 750 , circles : 1 , fn : function ( ) { return { r : 26 , style : { } } ; } } , dots : { dur : 750 , circles : 3 , fn : function ( _dur , index ) { const animationDelay = - ( 110 * index ) + 'ms' ; return { r : 6 , style : { left : ( 9 - ( 9 * index ) ) + 'px' , animationDelay : animationDelay , webkitAnimationDelay : animationDelay } } ; } } } ;