ionic2リップルBluetooth検索でデザインを作成する方法

Question

ionic2の検索ページにBluetooth検索デザインを実装したいと思います。

スピナーリップルのようにデザインできません。 Here is my example codepen

私はこれをしようとしている：

let loader = this.loadingCtrl.create({ 
     content: 'Please wait...', 
     spinner: 'ripple', 
     //duration: 3000 
    }); 

    loader.present(); 

    setTimeout(() => { 
     loader.dismiss(); 
    }, 3000); 

を私はionic3とangular4でこれを達成するにはどうすればよいです。私はこのexample

により近いように探しています

Answer 1

は、あなたがこの例を向上させることができます。

<div class="ripple" style="top:50%;left:50%"> 
</div> 

CSS：

ripple,.ripple:before,.ripple:after { 
    display:block; 
    border-radius:2px; 
    margin:0 auto; 
    width:2px; 
    height:2px; 
    -webkit-animation:rip 2s infinite; 
    -moz-animation:rip 2s infinite; 
} 
.ripple { 
    position:absolute; 
    z-index:1000; 
    top:10px; 
    left:15px; 
} 
.ripple:before,.ripple:after { 
    content:''; 
    position:absolute; 
} 
.ripple:before {-webkit-animation-delay:.1s;-moz-animation-delay:.2s;top:5px;left:0px;} 
.ripple:after {-webkit-animation-delay:.2s;-moz-animation-delay:.2s;top:5px;left:0;} 
@-webkit-keyframes rip 
{ 
    0% { 
    box-shadow:0 0 0 0 transparent, 
       0 0 0 0 transparent, 
       0 0 0 0 transparent, 
       0 0 0 0 transparent; 
    } 
    5% { 
    box-shadow:0 0 0 0 transparent, 
       0 0 0 0 rgba(255,0,0,0.5), 
       0 0 0 0 transparent, 
       0 0 0 0 rgba(0,0,0,0.1); 
    } 
    100% { 
    box-shadow:0 0 40px 50px transparent, 
       0 0 10px 60px transparent, 
       0 0 30px 70px transparent, 
       0 0 5px 80px transparent; 
    } 
} 
@-moz-keyframes rip 
{ 
    0% { 
    box-shadow:0 0 0 0 transparent, 
       0 0 0 0 transparent, 
       0 0 0 0 transparent, 
       0 0 0 0 transparent; 
    } 
    5% { 
    box-shadow:0 0 0 0 transparent, 
       0 0 0 0 rgba(255,0,0,0.5), 
       0 0 0 0 transparent, 
       0 0 0 0 rgba(0,0,0,0.1); 
    } 
    100% { 
    box-shadow:0 0 10px 75px transparent, 
       0 0 20px 75px transparent, 
       0 0 30px 75px transparent, 
       0 0 40px 75px transparent; 
    } 
} 

感謝。