微信小程序实现加载进度条
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);
}
})