.progress-indicator.segmented > .progress-indicator-bar {
    width: 0%;
    height: 100%;
    background-color: transparent;
    background-image: linear-gradient(90deg, navy 16px, transparent 0 2px);
    background-repeat: repeat;
    background-size: 18px 100%;
    animation: fill-linear 3s linear infinite;
}

@keyframes fill-linear {
    0% { width: 0%; } /* Start at 0px */

    /*
     * Calculation for keyframe percentages:
     * - `width_percent = (current_segments / 13.5) * 100`
     * - `time_percent = (current_segments / 14.5) * 100` (14.5 because 13.5 fill segments + 1 pause segment)
     * To create the "chunk" effect, we hold the previous width just before the new time_percent,
     * then jump to the new width at the time_percent (or slightly after with epsilon).
     */

    /* Segment 1 (18px, 7.4074% width) */
    6.8965% { width: 0%; } /* Hold previous width */
    6.8966% { width: 7.4074%; } /* Jump to 18px */

    /* Segment 2 (36px, 14.8148% width) */
    13.7930% { width: 7.4074%; }
    13.7931% { width: 14.8148%; } /* Jump to 36px */

    /* Segment 3 (54px, 22.2222% width) */
    20.6895% { width: 14.8148%; }
    20.6896% { width: 22.2222%; } /* Jump to 54px */

    /* Segment 4 (72px, 29.6296% width) */
    27.5861% { width: 22.2222%; }
    27.5862% { width: 29.6296%; } /* Jump to 72px */

    /* Segment 5 (90px, 37.0370% width) */
    34.4826% { width: 29.6296%; }
    34.4827% { width: 37.0370%; } /* Jump to 90px */

    /* Segment 6 (108px, 44.4444% width) */
    41.3792% { width: 37.0370%; }
    41.3793% { width: 44.4444%; } /* Jump to 108px */

    /* Segment 7 (126px, 51.8518% width) */
    48.2757% { width: 44.4444%; }
    48.2758% { width: 51.8518%; } /* Jump to 126px */

    /* Segment 8 (144px, 59.2592% width) */
    55.1723% { width: 51.8518%; }
    55.1724% { width: 59.2592%; } /* Jump to 144px */

    /* Segment 9 (162px, 66.6666% width) */
    62.0688% { width: 59.2592%; }
    62.0689% { width: 66.6666%; } /* Jump to 162px */

    /* Segment 10 (180px, 74.0740% width) */
    68.9654% { width: 66.6666%; }
    68.9655% { width: 74.0740%; } /* Jump to 180px */

    /* Segment 11 (198px, 81.4814% width) */
    75.8619% { width: 74.0740%; }
    75.8620% { width: 81.4814%; } /* Jump to 198px */

    /* Segment 12 (216px, 88.8888% width) */
    82.7585% { width: 81.4814%; }
    82.7586% { width: 88.8888%; } /* Jump to 216px */

    /* Segment 13 (234px, 96.2962% width) */
    89.6550% { width: 88.8888%; }
    89.6551% { width: 96.2962%; } /* Jump to 234px */

    /* Final Half Segment (243px total, 100% width) */
    93.1033% { width: 96.2962%; } /* Hold previous width */
    93.1034% { width: 100%; } /* Jump to 243px (100% fill) */

    /* Pause at 100% width for the remaining animation duration */
    100% { width: 100%; }
}

/*
@keyframes stripe-move {
    0% { background-position: 0 0; }
    100% { background-position: 18px 0; }
}
*/

/* hi if you are reading this, yes i used AI just for this progress bar, i was not arsed to do the maths myself */