Free Shipping Progress Bar

<?php
if ( ! class_exists( 'WooCommerce' ) ) { return; }

add_action( 'woocommerce_before_cart', 'scseed_shipping_bar_output' );
function scseed_shipping_bar_output() {
    $threshold = (float) apply_filters( 'scseed_shipping_threshold', 50 );
    if ( ! WC()->cart ) { return; }
    $subtotal  = (float) WC()->cart->get_displayed_subtotal();
    $remaining = max( 0, $threshold - $subtotal );
    $pct       = ( $threshold > 0 ) ? min( 100, round( ( $subtotal / $threshold ) * 100 ) ) : 0;
    if ( $remaining > 0 ) {
        $msg = sprintf(
            wp_kses_post( __( 'Spend <strong>%s</strong> more to unlock free shipping!', 'scseed' ) ),
            wc_price( $remaining )
        );
    } else {
        $msg = '<strong>' . esc_html__( 'You have unlocked free shipping!', 'scseed' ) . '</strong>';
    }
    ?>
    <div class="scseed-ship-wrap" data-threshold="<?php echo esc_attr( $threshold ); ?>">
        <p class="scseed-ship-msg"><?php echo wp_kses_post( $msg ); ?></p>
        <div class="scseed-ship-track" role="progressbar" aria-valuenow="<?php echo absint( $pct ); ?>" aria-valuemin="0" aria-valuemax="100">
            <div class="scseed-ship-fill" style="width:<?php echo absint( $pct ); ?>%"></div>
        </div>
    </div>
    <?php
}

.scseed-ship-wrap {
    margin: 0 0 1.25rem;
    padding: 0.875rem 1rem;
    background: #f8f9fa;
    border-radius: 6px;
    border: 1px solid #e9ecef;
}
.scseed-ship-msg {
    font-size: 0.875rem;
    margin: 0 0 0.5rem;
    color: #444;
}
.scseed-ship-track {
    background: #e0e0e0;
    border-radius: 99px;
    height: 8px;
    overflow: hidden;
}
.scseed-ship-fill {
    height: 100%;
    background: #4caf50;
    border-radius: 99px;
    transition: width 0.5s ease;
}

(function($) {
    'use strict';
    if ( typeof $ === 'undefined' ) { return; }
    $(document.body).on('updated_cart_totals wc_fragments_refreshed', function() {
        var $amount = $('.cart-subtotal .woocommerce-Price-amount bdi').first();
        var subtotal = $amount.length ? parseFloat( $amount.text().replace(/[^0-9.]/g, '') ) : 0;
        var $wrap = $('.scseed-ship-wrap');
        if ( ! $wrap.length ) { return; }
        var threshold = parseFloat( $wrap.data('threshold') ) || 50;
        var pct       = Math.min( 100, Math.round( ( subtotal / threshold ) * 100 ) );
        var remaining = Math.max( 0, threshold - subtotal );
        $wrap.find('.scseed-ship-fill').css( 'width', pct + '%' );
        var msg;
        if ( remaining > 0 ) {
            msg = 'Spend <strong>' + remaining.toFixed(2) + '</strong> more to unlock free shipping!';
        } else {
            msg = '<strong>You have unlocked free shipping!</strong>';
        }
        $wrap.find('.scseed-ship-msg').html(msg);
    });
}(jQuery));