vue实现button按钮进度条效果

 首先看html部分，我是通过div绘制按钮样式，并且通过自定义属性设置按钮的大小，也可以动态改变style样式，具体操作看vue官网。

这里的icons组件是我封装的图标组件，内部实现请看我的源码地址：src/components/Icons.vue · 刘紫成/vue3-vite-template - Gitee.comhttps://gitee.com/liu--zicheng/vue3-vite-template/blob/master/src/components/Icons.vue

就是将el-icon组件进行了二次封装，下载按钮动画也在这个项目里。

这个进度条主要通过css实现的，原理：将两个相同大小的盒子，默认是盒子的右上角和第二个盒子的左下角相连如下图，然后设定过度效果以及过度的时间 。

 js部分代码

设计思路：滚动条是不会到达100%的，只有接口请求成功，才会到100%并展示成功的样式，noprogress也差不多是这样的。

let sleep = (time: number) =>
  new Promise((resolve) => setTimeout(() => resolve(1), time));

const clickBtn = async () => {
// 滚动条会滚动不到100%，会等待。
  progressRef.value.classList.add("progress-animate");
  text.value.innerText = "downloading";
  isDownload.value = "downloading";

// 模拟请求，2s后，进度条达到 100%，然后展示成功样式
  const res = await sleep(2000);
  progressRef.value.classList.add("pro-com");
  if (res == 1) {
    isDownload.value = "downloaded";
    progressRef.value.classList.add("complete-animate");
    // text.value.style.color = "#fff";
    text.value.classList.add("download-text");
    text.value.innerText = "downloaded";
  }
};