先来上一波效果图

加载动画.gif

这个加载有两个动画

1、svg图
2、css制作动态效果

首先是svg图，复制下列代码，新建一个文件，粘贴进去，然后修改文件后缀为svg即可

<!-- By Sam Herbert (@sherb), for everyone. More @ http://goo.gl/7AJzbL -->
<svg width="44" height="44" viewBox="0 0 44 44" xmlns="http://www.w3.org/2000/svg" stroke="#000">
    <g fill="none" fill-rule="evenodd" stroke-width="2">
        <circle cx="22" cy="22" r="1">
            <animate attributeName="r"
                begin="0s" dur="1.8s"
                values="1; 20"
                calcMode="spline"
                keyTimes="0; 1"
                keySplines="0.165, 0.84, 0.44, 1"
                repeatCount="indefinite" />
            <animate attributeName="stroke-opacity"
                begin="0s" dur="1.8s"
                values="1; 0"
                calcMode="spline"
                keyTimes="0; 1"
                keySplines="0.3, 0.61, 0.355, 1"
                repeatCount="indefinite" />
        </circle>
        <circle cx="22" cy="22" r="1">
            <animate attributeName="r"
                begin="-0.9s" dur="1.8s"
                values="1; 20"
                calcMode="spline"
                keyTimes="0; 1"
                keySplines="0.165, 0.84, 0.44, 1"
                repeatCount="indefinite" />
            <animate attributeName="stroke-opacity"
                begin="-0.9s" dur="1.8s"
                values="1; 0"
                calcMode="spline"
                keyTimes="0; 1"
                keySplines="0.3, 0.61, 0.355, 1"
                repeatCount="indefinite" />
        </circle>
    </g>
</svg>

如想更换其他颜色，打开文件里面可以修改

修改颜色

接着，直接image引入添加样式就行了

然后就是css动效了，首先，html

 <view class="loadText">
  <image src="../../../image/puff.svg"></image>      //这是svg加载图
      登录中
      <view class="loadTextBox">
        <view style="margin-left: 5px;" class="{{isShow ? 'view1' : ''}}">.</view>
        <view style="margin-left: 15px;" class="{{isShow ? 'view2' : ''}}">.</view>
        <view style="margin-left:25px;" class="{{isShow ? 'view3' : ''}}">.</view>
      </view>
  </view>

然后是css

.loadText{
padding: 0.5rem 0;
width: 100%;
text-align: center;
margin: 80% auto;
position: fixed;
z-index: 111;
top: 0;
left:-1rem;
/* color: #fff; */
color: rgb(99, 99, 99);
font-size: 1.1rem;
/* text-shadow: 1px 1px 1px rgba(255,0,0,.1); */
}
.loadTextBox{
    display: inline-block;
position: relative;
top: -1.5rem;

}
.loadTextBox view{
display: inline-block;
width: 0;
height: 0;
padding: 3px;
position: absolute;
}
.view1{
animation: am 0.8s linear;
animation-delay: 0s;
}
.view2{
animation: am 0.8s linear;
animation-delay: 0.25s;
}
.view3{
animation: am 0.8s linear;
animation-delay: 0.5s;
}
@keyframes am{
  0%,100%{
    top: 0rem;

  }
  50%{
    top: -0.5rem;
  }
}
.ishide{
  animation: hide 0.5s linear;
  animation-fill-mode: forwards
}
.show{
  animation: show 0.5s linear;
  animation-fill-mode: forwards;
}


@keyframes show{
  0%{
    opacity: 0
  }
  100%{
opacity: 1
  }
}
@keyframes hide{
  0%{
    opacity: 1
  }
  100%{
opacity: 0
  }
}

最后js添加循环

//定义
data: {
    isShow: true // 是否显示'点'
}
----------------------------------
 this.interView()   //调用
-----------------------------------
interView:function(){
  let that = this;
  setInterval(function(){
  if (that.data.isShow){
    setTimeout(function(){
      that.setData({
        isShow: false
      })
    },500)
  }else{
    that.setData({
      isShow: true
    })
  }
  }, 600)
}

爱心发射biu.gif