CSS-Implementierungscode für horizontale und vertikale Fortschrittsbalken

Manchmal ist es schön, ein paar nette Scrollbar-Effekte zu sehen. Hier erkläre ich Ihnen, wie Sie CSS verwenden können, um

1. Horizontaler Fortschrittsbalken

<html>
<Kopf>
<title>Horizontaler Fortschrittsbalken</title>
<style type="text/css">   
    .Ladeleiste
    {
         Breite: 200px;
         Höhe: 25px;
         Hintergrundfarbe: #fff;
         Rand: 1px durchgezogen #ccc;        
    }
    .Bar
    {
        Zeilenhöhe: 25px;        
        Höhe: 100 %;
        Anzeige:Block;        
        Schriftfamilie: Arial;
        Schriftgröße: 12px;
        Hintergrundfarbe: #bb9319;        
        Farbe: #fff;
    }
</Stil>
</Kopf>
<Text> 
    <div Klasse="Ladeleiste">
      <strong class="bar" style='width:30%;'>30 %</strong>
    </div>
</body>
</html>

Die Wirkung ist wie folgt:

2. Vertikaler Fortschrittsbalken

<html>
<Kopf>
<title>Vertikaler Fortschrittsbalken</title>
<style type="text/css">   
    .Ladeleiste
    {
         Breite: 25px;
         Höhe: 200px;
         Hintergrundfarbe: #fff;
         Rand: 1px durchgezogen #ccc;
         Position: relativ; 
    }
    .Bar
    {
        Breite: 100 %;
        Anzeige:Block;        
        Schriftfamilie: Arial;
        Schriftgröße: 12px; 
        Hintergrundfarbe: #bb9319;
        Farbe: #fff;       
        Position: absolut;
        unten: 0;        
    }
</Stil>
</Kopf>
<Text> 
    <div Klasse="Ladeleiste">
      30 %
    </div>
</body>
</html>

Dies ist das Ende dieses Artikels über den Implementierungscode des horizontalen und vertikalen CSS-Fortschrittsbalkens. Weitere relevante Inhalte zum horizontalen und vertikalen CSS-Fortschrittsbalken 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!

<<: Einführung in die Verwendung von Requisiten in Vue

>>: Implementierung einer MySQL-Sicherungsstrategie (vollständige Sicherung + inkrementelle Sicherung)

Implementierung der MySQL5.7 mysqldump-Sicherung und -Wiederherstellung

CSS-Implementierungscode für horizontale und vertikale Fortschrittsbalken

Implementierung der MySQL5.7 mysqldump-Sicherung und -Wiederherstellung

Lösung für den Fehler der Remoteverbindung zur MySQL-Datenbank in der Linux-Konfiguration

Verwenden Sie PSSH zur Stapelverwaltung von Linux-Servern

Detailliertes Tutorial zur Springcloud-Alibaba-Nacos-Linux-Konfiguration

So fügen Sie Vite-Unterstützung zu alten Vue-Projekten hinzu

Mehrere Möglichkeiten zum Übergeben von Daten von übergeordneten Komponenten an untergeordnete Komponenten in Vue

Vue implementiert das Hoch- und Herunterladen von Dateien

Mit CSS3 implementierte Text-Popup-Effekte

MySQL-Batch entfernt Leerzeichen in einem bestimmten Feld

Einführung in den strikten Modus von JavaScript verwenden Sie strikt

Artikel empfehlen

Der Unterschied zwischen shtml und html

HTML-Auszeichnungssprache - Tabellen-Tag

So konfigurieren Sie gängige Software unter Linux

So verwenden Sie iframe, um die Daten anderer Webseiten unter Wahrung der Kompatibilität anzuwenden

Mysql-Fehler: Lösung für zu viele Verbindungen

Vollständige Analyse der Webseitenelemente

Detaillierte Schritte zur Installation der Sogou-Eingabemethode unter Ubuntu 20.04

Detaillierte Erklärung der grundlegenden Verwendung von MySQL-Triggern [Erstellen, Anzeigen, Löschen usw.]

Analyse der Verwendung und des Prinzips der Docker Swarm-Clusterverwaltung

Implementierung des Hochladens großer Dateien und des durch Haltepunkte fortsetzbaren Hochladens in Vue

So stellen Sie die angezeigte Seite so ein, dass Baidu ihren Snapshot nicht speichern kann

Teilen Sie die Schatzkammer mit 16 englischen Schriftarten mit brennendem Flammeneffekt

Eine detaillierte Einführung in die Tomcat-Verzeichnisstruktur

So installieren Sie Oracle_11g mit Docker

So verfolgen Sie Benutzer mit JS