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

感谢。

如何在ionic2波纹蓝牙搜索中创建设计

1 个答案: