HTML: Fortschrittsbalken erstellen – So gehts

Ad

Schritt 1: Erstelle das Grundgerüst deiner HTML-Seite:

HTML
<!DOCTYPE html>
<html>
<head>
    <title>Fortschrittsbalken</title>
    <style>
        /* Hier wird später der Fortschrittsbalken gestyled */
    </style>
</head>
<body>
    <!-- Hier wird später der Fortschrittsbalken platziert -->
</body>
</html>

Schritt 2: Füge den Fortschrittsbalken in den deiner Seite ein:

HTML
<body>
    <div class="progress-bar"></div>
</body>

Schritt 3: Style den Fortschrittsbalken mit CSS:

HTML
<style>
    .progress-bar {
        width: 50%; /* Setze hier den Startwert des Fortschrittsbalkens */
        height: 20px;
        background-color: blue; /* Wähle hier die Hintergrundfarbe des Fortschrittsbalkens */
    }
</style>

Schritt 4: Verwende JavaScript, um den Fortschrittsbalken zu animieren:

Java
<script>
    var progressBar = document.querySelector('.progress-bar');

    function setProgressBarWidth(widthPercentage) {
        progressBar.style.width = widthPercentage + '%';
    }

    // Gib hier den gewünschten Fortschritt in Prozent ein
    var progress = 75;
    setProgressBarWidth(progress);
</script>

Und das war’s! Du hast erfolgreich einen Fortschrittsbalken in HTML erstellt. Du kannst die Höhe, Farben und Animationslogik natürlich nach deinen eigenen Vorstellungen anpassen. Viel Spaß beim Ausprobieren!

Gesamter Beispielcode

HTML
<!DOCTYPE html>
<html>
<head>
    <title>Fortschrittsbalken</title>
    <style>
    .progress-bar {
        width: 50%; /* Setze hier den Startwert des Fortschrittsbalkens */
        height: 20px;
        background-color: green; /* Wähle hier die Hintergrundfarbe des Fortschrittsbalkens */
    }
</style>

<script>
    var progressBar = document.querySelector('.progress-bar');

    function setProgressBarWidth(widthPercentage) {
        progressBar.style.width = widthPercentage + '%';
    }

    // Gib hier den gewünschten Fortschritt in Prozent ein
    var progress = 75;
    setProgressBarWidth(progress);
</script>
</head>
<body>
     <div class="progress-bar"></div>
</body>
</html>

Ergebnis

Fortschrittsbalken

    html   

Über Mich


Weitere Beiträge auf Blogseite.com




Kennst du schon diese Memes?