当前位置: 首页 > news >正文

vue进度条组件

 <div class="global-mask" v-if="isProgress">
      <div class="contentBox">
        <div class="progresstitie">
          数据加载中请稍后
        </div>
        <el-progress class="progressStyle" :color="customColor" text-color="#fff" :text-inside="true" :stroke-width="20"
          :percentage=percentage status="success"></el-progress>
        <div class="progressSpan">拼命加载中......</div>
      </div>
    </div>



    fetchData() {
      this.percentage += 1
      if (this.percentage == 99) {
        clearInterval(this.intervalId)
      }
    },


//开始的时候执行   this.fetchData     this.isProgress= true
//结束的时候         this.isProgress= false





/* 遮罩层样式 */
.global-mask {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  /* 半透明灰色 */
  z-index: 9998;
  /* 确保在内容之上 */
}

/* 可选:禁止滚动 */
.mask-active {
  overflow: hidden;
  height: 100vh;

}

.contentBox {
  width: 40%;
  margin: 0 auto !important;
  position: absolute;
  top: 35%;
  left: 30%;
  height: 230px;
  border-radius: 10px;

  background-image: url("../../../assets/images/loadingBg.png");
  background-size: cover;

}

.progressSpan {
  color: rgb(64, 158, 255);
  font-size: 16px;
  text-align: center;
  padding: 10px 0;

}

.progressStyle {
  width: 80%;
  margin: 0 auto;
}

.progresstitie {
  font-size: 16px;
  text-align: center;
  font-weight: 600;
  font-size: 20px;
  line-height: 100px;
}

http://www.dtcms.com/a/112300.html

相关文章:

  • Vue3引入ElementPlus
  • SpringCloud第二篇:注册中心Eureka
  • 二叉树 树 - 问题集合
  • 列表与列表项
  • 爬虫案例:使用webpack爬取批量数据
  • 数据库DBA职业规划与技能提升指南
  • Linux | I.MX6ULL 终结者底板原理图讲解完(6)
  • 【Lua】pcall使用详解
  • PCI与PCIe接口的通信架构是主从模式吗?
  • spring IOC 反射 bean生命周期
  • JAVA实战开源项目:在线问卷调查系统(Vue+SpringBoot) 附源码
  • JavaScript 中常见的鼠标事件及应用
  • ASP.NET Core Web API 中 HTTP状态码的分类及对应的返回方法
  • OpenVLA-OFT——微调VLA的三大关键设计:支持动作分块的并行解码、连续动作表示以及L1回归目标
  • 5. RabbitMQ 消息队列中 Exchanges(交换机) 的详细说明
  • 使用 SignalR 在 .NET Core 8 最小 API 中构建实时通知
  • 项目实战(16)-GNSS码表
  • springboot集成Kafka
  • 如何在Springboot的Mapper中轻松添加新的SQL语句呀?
  • Eclipse 视图(View)
  • 大模型如何引爆餐饮与电商行业变革
  • 如何在Redis容量限制下保持热点数据
  • Vue3使用富文本编辑器vue-quill 自定义图片上传、文件上传
  • 数据库——MySQL数字函数和子查询
  • 交互式 AI 系统
  • C++ 极简常用内容
  • 电商---part02 项目环境准备
  • 如何根据电池电流计算电池容量
  • wsl编译openwrt24.10.0
  • dbscan 检测噪声