Vue realisiert einen dynamischen Fortschrittsbalkeneffekt

const controller = {
  init: erfordern('./controllers/html'),
  Geschwindigkeit: erforderlich('./controllers/speed')
}
exports.init = controller.init
exporte.Geschwindigkeit = Controller.Geschwindigkeit

exporte.set = () => {
  let dom = Dokument.createElement('div')
  dom.setAttribute('id', 'Fortschrittsgeschwindigkeit')
  dom.classList.add('Fortschrittsfeld', 'Fortschritt ausblenden')
  dom.innerHTML = '<div Klasse = "progress progress-speed-hide" id = "progress_box_speed"><div Klasse = "speed" Stil = "width:0%;background: #f2f3f5;transition: 0.2s;"></div></div>'
  document.getElementById('app').insertBefore(dom, document.getElementById('app').firstChild)
  lass Stil = `
              .Fortschrittsbox{
                Breite: 100 %;
                Höhe: 100%;
                Übergang: 0,4 s;
                Position: fest;
                oben: 0;
                links: 0;
                Hintergrund: rgba(0,0,0,0,5);
                z-Index: 4002;
              }
              .Fortschritt {
                Rahmenradius: 19px;
                Hintergrund: #f2f3f5;
                Breite: 80%;
                Höhe: 38px;
                Position: fest;
                oben: berechnet (50 % – 19 Pixel);
                links: berechnet (50 % – 40 %);
                z-Index: 2000;
                Übergang: 0,4 s;
                Deckkraft: 1;
              }
              .fortschritt-ausblenden{
                Rahmenradius: 19px;
                Breite: 0%;
                Höhe: 0%;
                oben: berechnet (50 % – 0 %);
                links: calc(50% - 0%);
                Übergang: 0,2 s;
                Überlauf: versteckt;
              }
              .Fortschritt-Geschwindigkeit-ausblenden{
                Breite: 0%;
                Höhe: 0px;
                Übergang: 0,6 s;
                Deckkraft: 0;
                Überlauf: versteckt;
              }
              .Geschwindigkeit {
                Rahmenradius: 19px;
                Hintergrundbild: -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);
                Hintergrundbild: -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);
                Hintergrundbild: linearer Farbverlauf (45 Grad, RGBA (255,255,255, 0,15) 25 %, transparent 25 %, transparent 50 %, RGBA (255,255,255, 0,15) 50 %, RGBA (255,255,255, 0,15) 75 %, transparent 75 %, transparent);
                Höhe: 38px;
                -webkit-Hintergrundgröße: 40px 40px;
                Hintergrundgröße: 40px 40px
                Breite: 0%;
                Übergang: 0,3 s;
                Hintergrundfarbe: #409EFF;
                -o-Animation: Fortschrittsbalkenstreifen 2 s linear unendlich;
                Animation: Fortschrittsbalken-Streifen 2 s linear unendlich;
              }
              .Geschwindigkeit-Erfolg{
                Breite: 100 %;
                Hintergrundfarbe: #67c23a;
              }
              @-webkit-keyframes Fortschrittsbalken-Streifen {
                  aus {
                      Hintergrundposition: 40px 0
                  }
              
                  Zu {
                      Hintergrundposition: 0 0
                  }
              }
              
              @-o-keyframes Fortschrittsbalken-Streifen {
                  aus {
                      Hintergrundposition: 40px 0
                  }
              
                  Zu {
                      Hintergrundposition: 0 0
                  }
              }
              
              @keyframes Fortschrittsbalken-Streifen {
                  aus {
                      Hintergrundposition: 40px 0
                  }
              
                  Zu {
                      Hintergrundposition: 0 0
                  }
              }`
  let styleElement = document.getElementById('Fortschritt')
  wenn (!styleElement) {
    styleElement = document.createElement('Stil')
    styleElement.Typ = "Text/CSS"
    styleElement.id = "Fortschritt"
    document.getElementsByTagName('head')[0].appendChild(styleElement)
    styleElement.appendChild(document.createTextNode(Stil))
  }
}

exports.run = (Zeit) => {
  document.getElementById('Fortschrittsgeschwindigkeit').classList.remove('Fortschritt ausblenden')
  Zeit = Zeit * 100
  let dom = document.getElementById('progress_box_speed')
  dom.classList.remove('Fortschrittsgeschwindigkeit ausblenden')
  dom.getElementsByClassName('Geschwindigkeit')[0].classList.remove('Geschwindigkeit-Erfolg')
  setzeTimeout(() => {
    dom.getElementsByClassName('Geschwindigkeit')[0].setAttribute('Stil', 'Breite:' + Zeit + '%')
  }, 10)
  wenn (Zeit >= 100) {
    setzeTimeout(() => {
      dom.getElementsByClassName('Geschwindigkeit')[0].classList.add('Geschwindigkeit-Erfolg')
      dom.getElementsByClassName('Geschwindigkeit')[0].setAttribute('Stil', 'Breite:100%')
      dom.classList.add('Fortschrittsgeschwindigkeit ausblenden')
      setzeTimeout(() => {
        document.getElementById('Fortschrittsgeschwindigkeit').classList.add('Fortschritt ausblenden')
        dom.getElementsByClassName('Geschwindigkeit')[0].setAttribute('Stil', 'Breite:0%')
      }, 900)
    }, 1000)
  }
}

Fortschritt aus „./common/progress“ importieren

Vue.prototype.$progress = Fortschritt

dies.$progress.init.set()
this.$progress.speed.run('10.555555') // Der Fortschrittsbalken wird 10,555555 % erreichen.