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)

IDEA2020.1.2 Detailliertes Tutorial zum Erstellen eines Webprojekts und Konfigurieren von Tomcat

Detaillierte Erläuterung der Idee, mysqldump + expect + crontab zur Implementierung eines regelmäßigen MySQL-Cold-Backups unter Linux zu verwenden

Inhaltsverzeichnis 1. Aufgetretene Probleme 2. Id...

CSS-Implementierungscode für horizontale und vertikale Fortschrittsbalken

IDEA2020.1.2 Detailliertes Tutorial zum Erstellen eines Webprojekts und Konfigurieren von Tomcat

So verwenden Sie die Form-Komponente von Antd in React, um Formularfunktionen zu implementieren

Detailliertes Tutorial zur Installation von qt5.12.8 und Umgebungskonfiguration auf Ubuntu18.04

So führen Sie das Springboot-Projekt im Docker aus

So packen Sie das Projekt per Idee in Docker

Detaillierte Erklärung einiger Einstellungen für Tabellenanpassung und Überlauf

Über Tomcat kombiniert mit Atomikos zur Implementierung von JTA

mysql ersetzt einen Teil des Feldinhalts und mysql ersetzt die Funktion replace()

Was sind die Vorteile von MySQL MGR?

So erstellen Sie eine Deep-Learning-Umgebung mit Python in einem Docker-Container

Artikel empfehlen

Eine kurze Analyse der Verwendung des HTML-Webpack-Plugins

So installieren Sie Docker unter Windows Server 2016

So importieren Sie eine JS-Konfigurationsdatei auf den Vue-Server

Zusammenfassung häufig verwendeter Operatoren und Funktionen in MySQL

Verbindung zum lokalen MySQL über Socket-Lösung „/tmp/mysql.sock“ nicht möglich

Detaillierte Erklärung zur Verwendung neuer Methoden von HTML5 zur Manipulation von Elementklassennamen in JavaScript

Detaillierte Erläuterung der Idee, mysqldump + expect + crontab zur Implementierung eines regelmäßigen MySQL-Cold-Backups unter Linux zu verwenden

Aufzeichnungen zur Verwendung von SSH-Befehlen unter Windows 8

Linux verwendet die suid vim.basic-Datei, um eine Rechteausweitung zu erreichen

Der Unterschied und die Verwendung des Kommunikationsbusses der Bruderkomponenten von Vue2 und Vue3

Ein IE-Absturzfehler

Docker Compose Idea CreateProcess-Fehler = 2 Das System kann die angegebene Datei nicht finden

Tutorial zum Upgrade, zur Installation und Konfiguration des Supervisors auf Centos 6.5

Detaillierte Erklärung der Unterschiede und Verwendungen von Linux-System-Shutdown-Befehlen

Zen-Codierung für Editplus – Beispielcodebeschreibung