Gestaltung

Der Balken lässt sich sowohl über die Plugin-Einstellung als auch über eigenes Theme-CSS anpassen.

Balkenfarbe über die Einstellung

Die einfachste Anpassung ist die Einstellung „Balkenfarbe" (Colorpicker) in der Konfiguration, Standard ist #37d046. Diese Farbe wird als Inline-Style auf die Füllung des Balkens gesetzt und muss daher nicht zusätzlich per CSS überschrieben werden.

Markup und CSS-Klassen

Der Balken wird als folgendes Grundgerüst ausgegeben:

<div class="futi-shipping-bar" role="status">
  <p class="futi-shipping-bar__text">…</p>
  <div class="futi-shipping-bar__track">
    <div class="futi-shipping-bar__fill" style="width: 60%; background-color: #37d046;"></div>
  </div>
</div>

Für eigene Theme-Anpassungen stehen folgende Klassen zur Verfügung:

Beispiel-SCSS

.futi-shipping-bar {
    margin-bottom: 16px;

    &__text {
        font-size: 14px;
        font-weight: 600;
        margin-bottom: 4px;
    }

    &__track {
        height: 6px;
        border-radius: 3px;
        background-color: $gray-200;
        overflow: hidden;
    }

    &__fill {
        height: 100%;
        transition: width 0.3s ease;
    }
}

Inline-Style der Füllfarbe und Spezifität

Das Plugin liefert grundlegende Basis-Styles über einen kleinen inline <style>-Block mit aus, damit der Balken auch ohne eigenes Theme-CSS funktionsfähig aussieht. Die Füllfarbe wird dabei zusätzlich als Inline-Style auf .futi-shipping-bar__fill gesetzt, da sie aus der Plugin-Einstellung stammt.

Barrierefreiheit

Der äußere Container trägt role="status", wodurch Screenreader den Textinhalt bei Änderungen (z. B. beim Erreichen der Schwelle) als Statusmeldung ausgeben. Achten Sie bei der Wahl einer eigenen Balkenfarbe auf ausreichenden Kontrast zur Hintergrundfarbe der Leerlaufstrecke, damit der Fortschritt auch für sehbehinderte Kunden gut erkennbar bleibt.