Verwenden Sie CSS3, um einen Fortschrittsbalkeneffekt zu erzielen und dynamisch Prozentsätze hinzuzufügen

Während des Projekts habe ich begonnen, die js requestAnimationFrame-Methode zu verwenden, um den Fortschrittsbalken zu implementieren. Dies beeinträchtigte die Leistung jedoch erheblich, wenn viele Daten vorhanden waren. Daher habe ich CSS zur Implementierung und Optimierung verwendet.

Fügen Sie zuerst den Code ein:

<!DOCTYPE html>
<html lang="de">
<Kopf>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
    <meta http-equiv="X-UA-kompatibel" content="ie=edge">
    <title>Dokument</title>
    <style type="text/css">
        *{Rand: 0;Padding: 0}
 
        .box{Breite: 100px;Höhe: 10px;Randradius: 10px;Hintergrund: #999;Rand: 100px auto;Rand: 1px durchgezogen #ff6780;}
        .child{position: relative;höhe:100%;border-radius:erben;}
 
        .process-animate{Hintergrund: #ff6780;Position: absolut;links: 0;oben: 0;unten: 0;border-radius:erben;
            Animation: Ablauf 1s linear vorwärts;
        }
        @keyframes-Prozess
        {
            0 %{
                links: 0; rechts: 100 %;
            }
            20 %
                rechts:80%
            }
            40 %
                rechts: 60 %;
            }
            60 % {right: 40 %;}
            80 % {right: 20 %;}
            100 % {rechts: 0;}
        }
	
    </Stil>
</Kopf>
<Text>
    <div Klasse="Box">
        <div class="child" style="width:50%"> // Der Prozentsatz des untergeordneten Elements ist der Anteil des Fortschrittsbalkens<p class="process-animate"></p>
        </div>
    </div>
</body>
</html>

Effektdiagramm (kopieren Sie den Code, um den dynamischen Effekt anzuzeigen):

Normalerweise muss der Prozentsatz auf Grundlage der Hintergrunddaten berechnet werden, sodass er dynamisch übergeben wird. Der Vue-Code wird unten veröffentlicht

Unterkomponente des Fortschrittsbalkens (progress.vue):

<Vorlage>
  <div Klasse="Prozess-Wrapper" :Klasse="{'addGray':addGray}">
    <div Klasse="Prozess-Kind" ref="Prozess-Kind">
      <p class="Prozess-Animation" :class="{'addGray':addGray}"></p>
    </div>
  </div>
</Vorlage>
 
<Skript>
Standard exportieren {
  Requisiten: {
    hinzufügenGray: {
      //Grauer Typ: Boolean,
      Standard: false
    },
    Fortschrittsbreite: {
      //Prozentsatz des Fortschrittsbalkens, Typ: Zahl,
      Standard: 0
    }
  },
  montiert() {
    dies.$nextTick(() => {
      Konsole.log(dies.addGray, "addGray---");
      this.$refs.processChild.style.width = this.progressWidth + "%"; //Fortschrittsbalken dynamisch ändern// this.$refs.processChild.style.width = 90 + "%"; Testeffekt});
  }
};
</Skript>
 
<style lang="scss" scoped>
.Prozess-Wrapper {
  Breite: 1,98rem;
  Höhe: 0,13rem;
  Rand: 0,12rem 0 0,1rem 0;
  Randradius: 0,1rem;
  Hintergrund: #fff;
  Rand: 0,01rem durchgezogen #ff6780;
  &.addGray {
    Hintergrund: #999;
    Rand: 0,01rem durchgezogen Nr. 999;
  }
  .Prozess-Kind {
    Position: relativ;
    Höhe: 100%;
    // Breite: 100 %; //Diese Breite ändert sich dynamisch. Rahmenradius ändern: durch js vererben;
    .Prozess-Animation {
      Hintergrund: #ff6780;
      Position: absolut;
      links: 0;
      oben: 0;
      unten: 0;
      Rahmenradius: erben;
      Animation: Ablauf 1s linear vorwärts;
      &.addGray {
        Hintergrund: #999 !wichtig;
        // Rand: 0,01rem durchgezogen #999;
      }
    }
  }
}
 
@keyframes verarbeiten {
  0% {
    links: 0;
    rechts: 100%;
  }
  20% {
    rechts: 80%;
  }
  40 % {
    rechts: 60%;
  }
  60 % {
    rechts: 40%;
  }
  80 % {
    rechts: 20%;
  }
  100 % {
    rechts: 0;
  }
}
</Stil>

Übergeordnete Komponentenaufrufe:

<!-- Fortschrittsbalken -->
 <Fortschritt :addGray="inaktiv" :progressWidth="progressWidth"></Fortschritt>

Sehen Sie die tatsächliche Wirkung:

vorbei; verwendet CSS perfekt, um den Leistungsverbrauch der rekursiven JS-Animation zu lösen.

Dies ist das Ende dieses Artikels über die Verwendung von CSS3 zum Erzielen von Fortschrittsbalkeneffekten und zum dynamischen Hinzufügen von Prozentsätzen. Weitere relevante CSS3-Fortschrittsbalken zum Hinzufügen dynamischer Prozentinhalte finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!

<<: Layout im Vue.js-Stil Allgemeine Fähigkeiten zur Flutter-Geschäftsentwicklung

>>: Detaillierte Beschreibung des HTML-Meta-Viewport-Attributs

Zusammenfassung der Verzögerungen der MySQL-Slave-Bibliothek „Seconds_Behind_Master“

Verwenden Sie CSS3, um einen Fortschrittsbalkeneffekt zu erzielen und dynamisch Prozentsätze hinzuzufügen

Zusammenfassung der Verzögerungen der MySQL-Slave-Bibliothek „Seconds_Behind_Master“

Schritte zum Bereitstellen von Ingress-Nginx auf K8s

Implementierung der Header-Informationen für Nginx-Operationsantworten

MySQL-Tutorial: Beispiel einer DML-Datenmanipulationssprache, ausführliche Erklärung

Vue verwendet MockJS, um simulierte Datenfalldetails zu generieren

Vollständige Schritte zur Verwendung von Nginx+Tomcat zum Lastenausgleich unter Windows

Detaillierte Erklärung zu MySQL und Springs Autocommit

Detaillierte Schritte zum Konfigurieren von mysql8.0.20 mit binlog2sql und einfacher Sicherung und Wiederherstellung

Nginx-Signalsteuerung

So legen Sie Remotezugriffsberechtigungen in MySQL 8.0 fest

Artikel empfehlen

Einführung in den Unterschied zwischen On- und Where-Bedingungen in der MySQL-Left-Join-Operation

HTML-Tabellen-Tag-Tutorial (46): Tabellenfußzeilen-Tag

Tutorial zu HTML-Tabellen-Tags (21): Zeilenrahmen-Farbattribut BORDERCOLOR

MySQL Series 11-Protokollierung

Erhalten Sie schnell Datenbankverbindungsinformationen und einige Erweiterungen über Zabbix

Einführung in den Installationsprozess von MySQL 8.0 in einer Linux-Umgebung

Master-Slave-Synchronisationskonfiguration und Lese-/Schreibtrennung der MySQL-Datenbank

So teilen und führen Sie mehrere Werte in einem einzigen Feld in MySQL zusammen

Element verwendet Skripte, um automatisch neue Komponenten zu erstellen

So öffnen Sie Ports zur Außenwelt in Alibaba Cloud Centos7.X

HTML-Codebeispiel: Detaillierte Erklärung von Hyperlinks

Kapseln Sie die Navigationsleistenkomponente mit Vue

Detaillierte Erklärung zur Verwendung der Funktion find_in_set() in MySQL

Neonlichteffekte mit reinem CSS3 umgesetzt

Implementierung des Aufbaus eines Kubernetes-Clusters mit VirtualBox+Ubuntu16