HTML5: Fortschrittsbalken (progress )

edit | delete

Autor: Ralf v.d.Mark

eingetragen: Freitag, 19. Juni 2020 um 08:31 Uhr (25/2020 Kalenderwoche)

geändert: Mittwoch, 15. September 2021 um 16:50 Uhr (37/2021 Kalenderwoche)

Keywords: progress Fortschrittsbalken

Kategorien: HTML, JavaScript, PHP,

Text:



In HTML5 hat man die Möglichkeit, eine visuelle Darstellung eines Ablaufs.
Stand der Abarbeitung: 65%
Restliche Sekunden
60 Sekunden


Sowas habe ich zum Beispiel in AIS beim Excel-Download (application_excelHelper\excelHelper.php). Dort wird mit PHP der dynamisch erzeuge HTML-Tag in eine Textdatei geschrieben, mit JavaScrip (Ajax) ausgelesen und in den Quellcode der Seite gepostet.


1.) TechDox: ähnliches Thema #229
2.) TechDox: ähnliches Thema #234



Quellcode:   

<?php

/**
 * Fortschrittsbalken (visuelle Darstellung eines Ablaufs der Excelerstellung)
 * die Funktion rechnet automatisch die übergebenen Werte in Prozent um.
 *
 * @version    19.06.2020
 * @author     Ralf von der Mark, BLE - Entwicklung <Ralf.vonderMark@BLE.de>
 *
 * @param string  $textAusserhalb
 * @param integer $anteilVonMaximalWert
 * @param integer $maximalWert
 * @param string  $textInnerhalbVorStand
 * @param string  $textInnerhalbHinterStand
 * @param boolean $prozentzahlHintenErneutAnzeigen
 *
 * @return string  (Beschreibung)
 */
function erstelleFortschrittsbalkenUndText($textAusserhalb,
                                           $anteilVonMaximalWert,
                                           $maximalWert = 100,
                                           $textInnerhalbVorStand = 'Ablaufstand: ',
                                           $textInnerhalbHinterStand = null,
                                           $prozentzahlHintenErneutAnzeigen = true)
{
    $maximalWert = intval($maximalWert);
    $anteilVonMaximalWert = intval($anteilVonMaximalWert);
    if ($maximalWert == 100 && $anteilVonMaximalWert < 101) {
        //Wenn 100 Prozent gesetzt und der Wert unter 100 bleibt, dann alles gut...
        $maximalWert = 100;
    } else {
        //Wenn $maximalWert nicht 100 ist, wird in Prozent umgerechnet:
        $anteilVonMaximalWert = intval($anteilVonMaximalWert * 100 / $maximalWert);
        $maximalWert = 100;
    }//ENDE: else ==> if ($anteilVonMaximalWert == 100)

    return $textAusserhalb
        . ' <progress value="' . $anteilVonMaximalWert . '" max="' . $maximalWert . '">' .
        $textInnerhalbVorStand . $anteilVonMaximalWert . '%' . $textInnerhalbHinterStand
        . '</progress> '
        . ($prozentzahlHintenErneutAnzeigen == true ? $anteilVonMaximalWert . '% ' : null);
}//ENDE: function erstelleFortschrittsbalkenUndText(...)

?>

Kleine Demo:<br>
<progress value="60" max="60" id="sekundenAnzeige">Restliche Sekunden</progress>
<span id="hintereAnzeige">60 Sekunden</span>
<script type="text/javascript">
    var eineSekunde = 60;
    var zeit = window.setTimeout("sekunden(\'" + eineSekunde + "\')", 1000);
    function sekunden(eineSekunde) {
        eineSekunde--;
        if (eineSekunde > 0) {
            document.getElementById("sekundenAnzeige").value = eineSekunde;
            document.getElementById("hintereAnzeige").innerText = 'noch ' + eineSekunde + ' Sekunden';
            zeit = window.setTimeout("sekunden(\'" + eineSekunde + "\')", 1000);
        } else {
            window.clearTimeout(zeit);
            document.getElementById("sekundenAnzeige").value = 0;
            document.getElementById("hintereAnzeige").innerText = 'Die Sekunden sind abgelaufen!';
        }
    }
</script>


<style>
/* **** START: Status-Bar PROGESS: ************
Ralf, 14.09.2021: Hintergrundfarbe/Balkenfarbe Änderung funktioniert nicht! :-/
Tipps von: https://www.hongkiat.com/blog/html5-progress-bar/  */
progress {
    /*background-color: #f3f3f3;*/
    border: 0;
    height: 18px;
    border-radius: 9px;
}
/* START: Chrome and Safari: */
progress::-webkit-progress-bar {
    /*background-color: #f3f3f3;*/
    border: 0;
    height: 18px;
    border-radius: 9px;
}
progress::-webkit-progress-value {
    /*background-color: #f3f3f3;*/
    border: 0;
    height: 18px;
    border-radius: 9px;
}
/* ENDE: Chrome and Safari: */
/* START: Firefox: */
progress::-moz-progress-bar {
    /*background-color: #f3f3f3;*/
    border: 0;
    height: 18px;
    border-radius: 9px;
}
/* ENDE: Firefox: */
/* **** ENDE: Status-Bar PROGESS: ************ */
</style>