[移动开发]微信小程序实现加载进度条

1.实现效果

2.实现原理

2.1第一个线条加载，设置translate3d属性，动态的改变百分比，实现加载。

translate3d() CSS 函数在3D空间内移动一个元素的位置。这个移动由一个三维向量来表达，分别表示他在三个方向上移动的距离。

translate3d(tx, ty, tz)

• tx是一个 代表移动向量的横坐标。
• ty是一个 代表移动向量的纵坐标。
• tz是一个 代表移动向量的z坐标。它不能是 值；那样的移动是没有意义的。

transform: translate3d(-{{100-scwidth}}%, 0px, 0px);

2.2 圆环加载绕圈，高亮部分长度不变，设置不同的border-color+rotate动画

 border-top: 6rpx solid rgba(0, 0, 0, 0.25);
  border-right: 6rpx solid rgba(0, 0, 0, 0.25);
  border-bottom: 6rpx solid rgba(0, 0, 0, 0.25);
  border-left: 6rpx solid orange;

2.3 圆环加载，长度从0-100%，通过canvas实现

wx.createCanvasContext('canvasCircle')

3.实现代码

<button class='btn' bindtap='action'>加载按钮</button>
<view class='progress' hidden="{{scwidth==0}}" style="top:0px;">
  <view class='progress-bar' style="transform: translate3d(-{{100-scwidth}}%, 0px, 0px);"></view>
  <view class='progress-spinner'></view>
</view>
<view class="load_circle" hidden="{{scwidth==0}}"></view>
<!-- canvas -->
<view class="loading-warp">
  <canvas class="canvas" canvas-id="canvasCircle"></canvas>
  <canvas class="canvas-mask" canvas-id="canvasRing"></canvas>
  <view class="rate">{{step}}%</view>
</view>

page {
  background-color: #fff;
}

.btn {
  margin: 140rpx auto;
  width: 150rpx;
  height: 50rpx;
  line-height: 50rpx;
  text-align: center;
  background-color: orange;
  font-size: 27rpx;
  color: #ffffff;
}

.progress {
  pointer-events: none;
  top: 0;
  position: fixed;
  width: 100%;
  left: 0;
  z-index: 2000;
}

.progress-bar {
  width: 100%;
  height: 4rpx;
  overflow: hidden;
  transition: all 200ms ease 0s;
  background: orange;
}

.progress-spinner {
  position: absolute;
  top: 10rpx;
  right: 10rpx;
  z-index: 2000;
  display: block;
  border-color: orange;
}

.progress-spinner::after {
  content: "";
  display: block;
  width: 24rpx;
  height: 24rpx;
  box-sizing: border-box;
  border: solid 4rpx transparent;
  border-top-color: inherit;
  border-left-color: inherit;
  border-radius: 50%;
  -webkit-animation: load-spinner 0.4s linear infinite;
  animation: load-spinner 0.4s linear infinite;
}

@keyframes load-spinner {
  0% {
    -webkit-transform: rotate(0);
    transform: rotate(0);
  }

  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

.load_circle {
  margin: 60px auto;
  width: 200rpx;
  height: 200rpx;
  position: relative;
  border-radius: 50%;
  border-top: 6rpx solid rgba(0, 0, 0, 0.25);
  border-right: 6rpx solid rgba(0, 0, 0, 0.25);
  border-bottom: 6rpx solid rgba(0, 0, 0, 0.25);
  border-left: 6rpx solid orange;
  animation: circle-ani 1s infinite linear;
}
@keyframes circle-ani {
  0% {
    -webkit-transform: rotate(0);
    transform: rotate(0);
  }

  100% {
    -webkit-transform: rotate(359deg);
    transform: rotate(359deg);
  }
}

/* canvas */
.loading-warp {
  z-index: 0;
  position: relative;
  margin: 100px auto 20px;
  width: 200px;
  height: 200px;
}

.canvas {
  z-index: 1;
  width: 200px;
  height: 200px;
}

.canvas-mask {
  z-index: 2;
  position: absolute;
  top: 0;
  left: 0;
  width: 200px;
  height: 200px;
}

.rate {
  z-index: 1;
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  text-align: center;
  color: #333;
  font-size: 40rpx;
  transform: translateY(-50%);
}

// pages/wxCase/loadingBar/index.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    scwidth: 0,
    flag: false,
    step: 0
  },
  action() {
    if (!this.data.flag) {
      this.setData({
        scwidth: this.data.scwidth + 3,
        flag: true
      })
      if (this.data.scwidth < 100) {
        setTimeout(() => {
          this.actionDack();
        }, 100)
      } else {
        this.setData({
          scwidth: 0
        })
      }
    }
  },
  actionDack() {
    this.setData({
      scwidth: this.data.scwidth + 3,
    })
    if (this.data.scwidth < 100) {
      setTimeout(() => {
        this.actionDack();
      }, 100)
    } else {
      this.setData({
        scwidth: 0,
        flag: false
      })
    }
  },

  onReady: function () {
    var that = this;
    var cxt = wx.createCanvasContext('canvasCircle');
    cxt.setLineWidth(6);
    cxt.setStrokeStyle('#eaeaea');
    cxt.setLineCap('round');
    cxt.beginPath();
    cxt.arc(100, 100, 96, 0, 2 * Math.PI, false);
    cxt.stroke();
    cxt.draw();
    //加载动画
    var steps = 1, startAngle = 1.5 * Math.PI, endAngle = 0, speed = 100, sec = 100;
    function drawing(s, e) {
      var context = wx.createCanvasContext('canvasRing');
      context.setLineWidth(6);
      context.setStrokeStyle('orange');
      context.setLineCap('round');
      context.beginPath();
      context.arc(100, 100, 96, s, e, false);
      context.stroke();
      context.draw();
    }
    function drawLoading() {
      if (steps < 101) {
        that.setData({
          step: steps
        })
        endAngle = steps * 2 * Math.PI / speed + startAngle;
        drawing(startAngle, endAngle);
        steps++;
      } else {
        clearInterval(this.interval);
      }
    }
    this.interval = setInterval(drawLoading, sec);
  }

})

4.更多小程序demo，在gitee平台，如果对你有帮助，star+订阅，更多资讯，关注苏苏的bug，欢迎你的订阅~