Vue realizes dynamic progress bar effect

This article example shares the specific code of Vue to achieve the dynamic progress bar effect for your reference. The specific content is as follows

Demonstration effect:

structure

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)
  }
}

How to use?

Import in main.js (based on the path of your own new file, this is my own path)

import progress from './common/progress'

Global Mount

Vue.prototype.$progress = progress

structure

use:

this.$progress.init.set()
this.$progress.speed.run('10.555555') // The progress bar will reach 10.555555%

After the progress bar reaches 100, it will automatically hide! It can be mounted globally, and then used wherever a progress bar is needed!

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in: