HTML Progressbar mit Zahl aber ohne %

Registriere dich jetzt, um exklusive Vorteile zu genießen! Als registriertes Mitglied kannst du Inhalte herunterladen und profitierst von einem werbefreien Forum.
Mach mit und werde Teil unserer Community!
  • Hallo zusammen,


    Ich habe folgenden Code um einen Progress-bar auf meiner Seite einzublenden.

    PHP
       <p style="width:<?php echo $temp; ?>" data-value="<?php echo $temp; ?>"><?php echo $row["bezeichnung"]?></p>
            <progress max="100" value="<?php echo $temp; ?>" class="html5">
                <!-- Browsers that support HTML5 progress element will ignore the html inside `progress` element. Whereas older browsers will ignore the `progress` element and instead render the html inside it. -->
                <div class="progress-bar">
                    <span style="width: <?php echo $temp; ?>"><?php echo $temp; ?></span>
                </div>
            </progress>

    Nun habe ich oben xx% und unterhalb den Progressbar.

    Weis jemand wie ich dass xx% zu einem xx°C wechsle? Kann ich bei einem Progressbar in HTML überhaupt das Zeichen hinter der Zahl ändern?


    Danke für eure bemühung.:danke_ATDE:

    Ready when you are :bravo2:

  • Nein, das geht nicht, da jedes OS deinen Fortschrittsbalken als natives Widget und somit überall unterschiedlich rendert. Bei mir sieht das z.B. so aus:


    pasted-from-clipboard.png


    Nicht vergleichbar mit deinem Balken (unter Windows grün, denke ich).


    Aber nimm' doch einfach den Fallback-Code als dein Progress-Bar:

    HTML
    <div class="progress-bar">
      <span style="width: <?php echo $temp; ?>"><?php echo $temp; ?></span>
    </div>

    Progressbars mit eigenem Markup zu realisieren ist eh sehr verbreitet, unter anderem aus dem Grund, dass sie sich dann vernünftig stylen lassen.