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

Optimale Webseitenbreite und ihre kompatible Implementierungsmethode

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

Optimale Webseitenbreite und ihre kompatible Implementierungsmethode

Mehrere Methoden zum Bereitstellen mehrerer Front-End-Projekte mit nginx

Detaillierte Erklärung zur Verwendung der JavaScript-Zwischenablage

Grundlegende Verwendung der Funktion find_in_set in MySQL

Einige Hinweise zu MySQL-Routineberechtigungen

Detaillierte Erklärung zur Verwendung des at-Befehls für einmalig geplante Aufgaben in Linux

Detailliertes Beispiel für die Verwendung der if-Anweisung in einer gespeicherten MySQL-Prozedur

Detaillierter Prozess zum Ändern der Apt-Quelle in die Alibaba Cloud-Quelle in Ubuntu 18.04

Zusammenfassung der Methode von React zum Erstellen von Komponenten

So installieren Sie Tomcat-8.5.39 auf centos7.6

Artikel empfehlen

WeChat-Applet-Entwicklung Formularvalidierung WxValidate-Nutzung

Tutorial zur Installation von MySQL 8.0.11 mit RPM unter Linux (CentOS7)

Detaillierte Erklärung der Docker-Maschinennutzung

Installieren Sie mysql5.7.10 manuell unter Ubuntu

Docker nginx implementiert einen Host zum Bereitstellen mehrerer Sites

Benutzerdefinierter Kalendereffekt in JavaScript

Beheben Sie das Problem des schwarzen Bildschirms beim Starten der virtuellen VMware-Maschine

Lernen Sie 10 Möglichkeiten zum horizontalen und vertikalen Zentrieren in CSS kennen (Zusammenfassung)

Vue implementiert eine Wettervorhersagefunktion

Grafisches Tutorial zur Installation und Konfiguration von MySQL 5.7.21 winx64 unter Windows 10

MySQL 5.6.24 (binär) automatisches Installationsskript unter Linux

Detaillierte Erklärung der Linux-CPU-Last und CPU-Auslastung

So fügen Sie MySQL Indizes hinzu

MySQL verwendet Aggregatfunktionen zum Abfragen einer einzelnen Tabelle

Studieren Sie die Verwendung von Zeichen anstelle von Bildern, um abgerundete oder scharfe Ecken zu erzielen