• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

vue实现动态进度条效果

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

本文实例为大家分享了vue实现动态进度条效果的具体代码,供大家参考,具体内容如下

演示效果:

结构

progress/index.js

const controller = {
  init: require('./controllers/html'),
  speed: require('./controllers/speed')
}
exports.init = controller.init
exports.speed = controller.speed

progress/controllers/html/index.js

exports.set = () => {
  let dom = document.createElement('div')
  dom.setAttribute('id', 'progress_speed')
  dom.classList.add('progress-box', 'progress-hide')
  dom.innerHTML = '<div class="progress progress-speed-hide" id="progress_box_speed"><div class="speed" style="width:0%;background: #f2f3f5;transition: 0.2s;"></div></div>'
  document.getElementById('app').insertBefore(dom, document.getElementById('app').firstChild)
  let Style = `
              .progress-box{
                width: 100%;
                height: 100%;
                transition: 0.4s;
                position: fixed;
                top: 0;
                left: 0;
                background: rgba(0,0,0,0.5);
                z-index:4002;
              }
              .progress {
                border-radius: 19px;
                background: #f2f3f5;
                width: 80%;
                height: 38px;
                position: fixed;
                top: calc(50% - 19px);
                left: calc(50% - 40%);
                z-index:2000;
                transition: 0.4s;
                opacity: 1;
              }
              .progress-hide{
                border-radius: 19px;
                width: 0%;
                height: 0%;
                top: calc(50% - 0%);
                left: calc(50% - 0%);
                transition: 0.2s;
                overflow: hidden;
              }
              .progress-speed-hide{
                width: 0%;
                height: 0px;
                transition: 0.6s;
                opacity: 0;
                overflow: hidden;
              }
              .speed {
                border-radius: 19px;
                background-image: -webkit-linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);
                background-image: -o-linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);
                background-image: linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);
                height: 38px;
                -webkit-background-size: 40px 40px;
                background-size: 40px 40px
                width: 0%;
                transition: 0.3s;
                background-color:#409EFF;
                -o-animation: progress-bar-stripes 2s linear infinite;
                animation: progress-bar-stripes 2s linear infinite;
              }
              .speed-success{
                width: 100%;
                background-color: #67c23a;
              }
              @-webkit-keyframes progress-bar-stripes {
                  from {
                      background-position: 40px 0
                  }
              
                  to {
                      background-position: 0 0
                  }
              }
              
              @-o-keyframes progress-bar-stripes {
                  from {
                      background-position: 40px 0
                  }
              
                  to {
                      background-position: 0 0
                  }
              }
              
              @keyframes progress-bar-stripes {
                  from {
                      background-position: 40px 0
                  }
              
                  to {
                      background-position: 0 0
                  }
              }`
  let styleElement = document.getElementById('progress')
  if (!styleElement) {
    styleElement = document.createElement('style')
    styleElement.type = 'text/css'
    styleElement.id = 'progress'
    document.getElementsByTagName('head')[0].appendChild(styleElement)
    styleElement.appendChild(document.createTextNode(Style))
  }
}

progress/controllers/speed/index.js

exports.run = (time) => {
  document.getElementById('progress_speed').classList.remove('progress-hide')
  time = time * 100
  let dom = document.getElementById('progress_box_speed')
  dom.classList.remove('progress-speed-hide')
  dom.getElementsByClassName('speed')[0].classList.remove('speed-success')
  setTimeout(() => {
    dom.getElementsByClassName('speed')[0].setAttribute('style', 'width:' + time + '%')
  }, 10)
  if (time >= 100) {
    setTimeout(() => {
      dom.getElementsByClassName('speed')[0].classList.add('speed-success')
      dom.getElementsByClassName('speed')[0].setAttribute('style', 'width:100%')
      dom.classList.add('progress-speed-hide')
      setTimeout(() => {
        document.getElementById('progress_speed').classList.add('progress-hide')
        dom.getElementsByClassName('speed')[0].setAttribute('style', 'width:0%')
      }, 900)
    }, 1000)
  }
}

如何使用?

main.js中导入(根据你自己新建文件的路径为基准,这是我自己的路径)

import progress from './common/progress'

全局挂载

Vue.prototype.$progress = progress

结构

使用:

this.$progress.init.set()
this.$progress.speed.run('10.555555') // 这样进度条就走到10.555555%了

进度条走到100之后,会自动隐藏!可以全局挂载,然后各种需要进度条的地方再使用!

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持极客世界。


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
JS中可能会常用到的一些数据处理方法发布时间:2022-02-05
下一篇:
jquery实现员工信息添加与删除功能发布时间:2022-02-05
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap