如何在ionic2紋波藍牙搜索中創建設計

Question

我想在ionic2的我的搜索頁面上實現藍牙搜索設計。

我不能像我的設計一樣設計成微調波紋。 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實現這一目標。

Answer 1

我正在尋找像靠近這個example

能，可以提高這個例子。

<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; 
    } 
} 

感謝。