loading方法，项目中用到了记录一下

1.从左到右的loading圆点
wxml

 <view class="loading4">
    <view class="three1"></view>
    <view class="three2"></view>
    <view class="three3"></view>
 </view>

wxss

  .loading4{
            width:150px;
            margin:50px auto;
            text-align: center;
        }
        .loading4 >view{
          width: 10rpx;
          height: 10rpx;
          border-radius: 100%;
          display:inline-block;
          background-color: #C5C9D2;
          margin-right: 10rpx;
          animation: three 1.04s ease infinite;
          /* -webkit-animation-fill-mode: both; 这是点大小变化的样式
          animation-fill-mode: both; */
        }

        @keyframes three { //如果是想点之间切换的时候点的大小有变化就用这个动画
          0% {-webkit-transform: scale(1) }
          100% { -webkit-transform: scale(.3) }
        }
        @keyframes three { //这个是只改变点的颜色深浅
          
           0%{
                opacity: 1;
            }
            100%{
                opacity: 0.6;
            }
        }
         .loading4 view:nth-child(1){
            animation-delay:0.13s;
        }
        .loading4 view:nth-child(2){
            animation-delay:0.26s;
        }
        .loading4 view:nth-child(3){
           animation-delay:0.39s;
           margin-right: 0
        }

2.常见的加载loading展示
wxml

<view class="loadEffect">
        <text></text>
        <text></text>
        <text></text>
        <text></text>
        <text></text>
        <text></text>
        <text></text>
        <text></text>
</view>

wxss

.loadEffect{
            width: 100rpx;
            height: 100rpx;
            position: relative;
            margin: 0 auto;
            margin-top:100rpx;
        }
        .loadEffect text{
            display: inline-block;
            width: 16rpx;
            height: 16rpx;
            border-radius: 50%;
            background: rgb(197, 201, 197);
            position: absolute;
            -webkit-animation: load 1.04s ease infinite;
        }
        @-webkit-keyframes load{
            0%{
                opacity: 1;
            }
            100%{
                opacity: 0.2;
            }
        }
        .loadEffect text:nth-child(1){
            left: 0;
            top: 50%;
            margin-top:-8rpx;
            -webkit-animation-delay:0.13s;
        }
        .loadEffect text:nth-child(2){
            left: 14rpx;
            top: 14rpx;
            -webkit-animation-delay:0.26s;
        }
        .loadEffect text:nth-child(3){
            left: 50%;
            top: 0;
            margin-left: -8rpx;
            -webkit-animation-delay:0.39s;
        }
        .loadEffect text:nth-child(4){
            top: 14rpx;
            right:14rpx;
            -webkit-animation-delay:0.52s;
        }
        .loadEffect text:nth-child(5){
            right: 0;
            top: 50%;
            margin-top:-8rpx;
            -webkit-animation-delay:0.65s;
        }
        .loadEffect text:nth-child(6){
            right: 14rpx;
            bottom:14rpx;
            -webkit-animation-delay:0.78s;
        }
        .loadEffect text:nth-child(7){
            bottom: 0;
            left: 50%;
            margin-left: -8rpx;
            -webkit-animation-delay:0.91s;
        }
        .loadEffect text:nth-child(8){
            bottom: 14rpx;
            left: 14rpx;
            -webkit-animation-delay:1.04s;
        }

3.录音的laoding展示
wxml

<view class="loading">
        <text></text>
        <text></text>
        <text></text>
        <text></text>
        <text></text>
</view>

wxss

.loading{
           display: flex;
           justify-content: center;
            margin-top:100rpx;
        }
        .loading text{
            display: inline-block;
            margin-right: 40rpx;
            width: 16rpx;
            height: 100%;
            border-radius: 8rpx;
            background: #C5C9D2;
            -webkit-animation: load 1s ease infinite;
        }
        @-webkit-keyframes load{
            0%,100%{
                height: 80rpx;
                margin-right: 20rpx;
                opacity: .3
            }
            50%{
                height: 140rpx;
                opacity: 1;
                margin: -30rpx 0;
                margin-right: 20rpx;
            }
        }
        .loading text:nth-child(2){
            -webkit-animation-delay:0.2s;
        }
        .loading text:nth-child(3){
            -webkit-animation-delay:0.4s;
        }
        .loading text:nth-child(4){
            -webkit-animation-delay:0.6s;
        }
        .loading text:nth-child(5){
            -webkit-animation-delay:0.8s;
        }