Styling

The bar can be customized both through the plugin setting and through your own theme CSS.

Bar color via the setting

The simplest customization is the "Bar color" setting (color picker) in the Configuration, defaulting to #37d046. This color is set as an inline style on the bar's fill element and therefore doesn't need to be overridden via CSS.

Markup and CSS classes

The bar is rendered using the following basic structure:

<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>

The following classes are available for your own theme customizations:

Example 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 of the fill color and specificity

The plugin ships basic base styles via a small inline <style> block so the bar looks functional even without custom theme CSS. The fill color is additionally set as an inline style on .futi-shipping-bar__fill, since it comes from the plugin setting.

Accessibility

The outer container carries role="status", so screen readers announce the text content as a status message when it changes (e.g. when the threshold is reached). When choosing a custom bar color, make sure it has sufficient contrast against the track's background color so the progress remains clearly visible for customers with visual impairments as well.