Vue は動的なプログレスバー効果を実現します

const コントローラ = {
  初期化: require('./controllers/html'),
  速度: require('./controllers/speed')
}
exports.init = コントローラ.init
exports.speed = コントローラ.speed

エクスポート.set = () => {
  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) の順にクリックします。
  スタイル = `
              .progress-box{
                幅: 100%;
                高さ: 100%;
                遷移: 0.4秒;
                位置: 固定;
                上: 0;
                左: 0;
                背景: rgba(0,0,0,0.5);
                zインデックス:4002;
              }
              。進捗 {
                境界線の半径: 19px;
                背景: #f2f3f5;
                幅: 80%;
                高さ: 38px;
                位置: 固定;
                上: calc(50% - 19px);
                左: 計算(50% - 40%)
                zインデックス:2000;
                遷移: 0.4秒;
                不透明度: 1;
              }
              .progress-hide{
                境界線の半径: 19px;
                幅: 0%;
                高さ: 0%;
                上: calc(50% - 0%);
                左: 計算(50% - 0%);
                遷移: 0.2秒;
                オーバーフロー: 非表示;
              }
              .進行速度非表示{
                幅: 0%;
                高さ: 0px;
                遷移: 0.6 秒;
                不透明度: 0;
                オーバーフロー: 非表示;
              }
              。スピード {
                境界線の半径: 19px;
                背景画像: -webkit-linear-gradient(45deg,rgba(255,255,255,.15) 25%,透明 25%,透明 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,透明 75%,透明);
                背景画像: -o-linear-gradient(45deg,rgba(255,255,255,.15) 25%,透明 25%,透明 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,透明 75%,透明);
                背景画像: 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);
                高さ: 38px;
                -webkit-背景サイズ: 40px 40px;
                背景サイズ: 40px 40px
                幅: 0%;
                遷移: 0.3秒;
                背景色:#409EFF;
                -o-animation: プログレスバーストライプ 2s 線形無限;
                アニメーション: プログレスバーストライプ 2 秒 線形 無限;
              }
              .スピード成功{
                幅: 100%;
                背景色: #67c23a;
              }
              @-webkit-keyframes プログレスバーのストライプ {
                  から {
                      背景位置: 40px 0
                  }
              
                  に {
                      背景位置: 0 0
                  }
              }
              
              @-o-keyframes プログレスバーストライプ {
                  から {
                      背景位置: 40px 0
                  }
              
                  に {
                      背景位置: 0 0
                  }
              }
              
              @keyframes プログレスバーのストライプ {
                  から {
                      背景位置: 40px 0
                  }
              
                  に {
                      背景位置: 0 0
                  }
              }`
  styleElement = document.getElementById('progress') とします。
  スタイル要素の場合
    styleElement = document.createElement('style')
    styleElement.type = 'text/css'
    styleElement.id = '進捗状況'
    document.getElementsByTagName('head')[0].appendChild(styleElement)
    styleElement.appendChild(document.createTextNode(スタイル))
  }
}

exports.run = (時間) => {
  document.getElementById('progress_speed').classList.remove('progress-hide')
  時間 = 時間 * 100
  dom = document.getElementById('progress_box_speed') とします。
  dom.classList.remove('進行速度を非表示')
  dom.getElementsByClassName('speed')[0].classList.remove('speed-success')
  タイムアウトを設定する(() => {
    dom.getElementsByClassName('speed')[0].setAttribute('style', 'width:' + time + '%')
  }, 10)
  (時間 >= 100) の場合 {
    タイムアウトを設定する(() => {
      dom.getElementsByClassName('speed')[0].classList.add('speed-success')
      dom.getElementsByClassName('speed')[0].setAttribute('style', 'width:100%')
      dom.classList.add('進行速度を非表示')
      タイムアウトを設定する(() => {
        document.getElementById('progress_speed').classList.add('progress-hide')
        dom.getElementsByClassName('speed')[0].setAttribute('style', 'width:0%')
      }, 900)
    }, 1000)
  }
}

'./common/progress' から進捗状況をインポートします

Vue.prototype.$progress = 進行状況

this.$progress.init.set()
this.$progress.speed.run('10.555555') // 進捗バーは10.555555%に達します