ordered list with progress (color the border) tailwind

Good day all

I am creating a multistep form, with ordered list that have a progress. I created the ordered list with progress but I can't seem to colour the ordered list border in a progressive way.

I want to do this

This is what I have done so far.

This is the ordered list code:

<div class="w-[24%]">
                    <ol
                        class="relative text-gray-500 border-s border-gray-200 dark:border-gray-700 dark:text-gray-400">
                        <li class="mb-10 ms-6">
                            <span
                                class="absolute flex items-center justify-center -start-2.5 h-5 w-5 bg-white rounded-full ring-4 ring-white dark:ring-gray-800 dark:bg-gray-800">
                                <span
                                    class="absolute flex items-center justify-center h-2.5 w-2.5 {{ $currentStep >= 0 ? 'bg-blue-700 ring-reen-500 dark:bg-blue-700 dark:ring-blue-700' : 'bg-white ring-gray-300 dark:ring-gray-700 dark:bg-gray-800' }}  rounded-full ring-2">
                                    @if ($currentStep > 0)
                                        <svg class="w-6 h-6 text-gray-800 dark:text-white" aria-hidden="true"
                                            xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                                            <path stroke="currentColor" stroke-linecap="round"
                                                stroke-linejoin="round" stroke-width="2" d="m5 12 4.7 4.5 9.3-9" />
                                        </svg>
                                    @endif
                                </span>
                            </span>
                            <h3 class="font-medium leading-tight">Personal Info</h3>
                        </li>
                        <li class="mb-10 ms-6">
                            <span
                                class="absolute flex items-center justify-center -start-2.5 h-5 w-5 bg-white rounded-full ring-4 ring-white dark:ring-gray-800 dark:bg-gray-800">
                                <span
                                    class="absolute flex items-center justify-center h-2.5 w-2.5 {{ $currentStep >= 1 ? 'bg-blue-700 ring-reen-500 dark:bg-blue-700 dark:ring-blue-700' : 'bg-white ring-gray-300 dark:ring-gray-700 dark:bg-gray-800' }} rounded-full ring-2">
                                    @if ($currentStep > 1)
                                        <svg class="w-6 h-6 text-gray-800 dark:text-white" aria-hidden="true"
                                            xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                                            <path stroke="currentColor" stroke-linecap="round"
                                                stroke-linejoin="round" stroke-width="2" d="m5 12 4.7 4.5 9.3-9" />
                                        </svg>
                                    @endif
                                </span>
                            </span>
                            <h3 class="font-medium leading-tight">Account Info</h3>
                        </li>
                        <li class="mb-10 ms-6">
                            <span
                                class="absolute -start-2.5 flex h-5 w-5 items-center justify-center rounded-full bg-white ring-4 ring-white dark:bg-gray-800 dark:ring-gray-800">
                                <span
                                    class="absolute flex h-2.5 w-2.5 items-center justify-center rounded-full {{ $currentStep >= 2 ? 'bg-blue-700 ring-reen-500 dark:bg-blue-700 dark:ring-blue-700' : 'bg-white ring-gray-300 dark:ring-gray-700 dark:bg-gray-800' }} ring-2">
                                    @if ($currentStep > 2)
                                        <svg class="w-6 h-6 text-gray-800 dark:text-white" aria-hidden="true"
                                            xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                                            <path stroke="currentColor" stroke-linecap="round"
                                                stroke-linejoin="round" stroke-width="2" d="m5 12 4.7 4.5 9.3-9" />
                                        </svg>
                                    @endif
                                </span>
                            </span>
                            <h3 class="font-medium leading-tight">Review</h3>
                        </li>
                        <li class="ms-6">
                            <span
                                class="absolute -start-2.5 flex h-5 w-5 items-center justify-center rounded-full bg-white ring-4 ring-white dark:bg-gray-800 dark:ring-gray-800">
                                <span
                                    class="absolute flex h-2.5 w-2.5 items-center justify-center rounded-full {{ $currentStep >= 3 ? 'bg-blue-700 ring-reen-500 dark:bg-blue-700 dark:ring-blue-700' : 'bg-white ring-gray-300 dark:ring-gray-700 dark:bg-gray-800' }} ring-2">
                                </span>
                            </span>
                            <h3 class="font-medium leading-tight">Confirmation</h3>
                        </li>
                    </ol>
                </div>  

Currently when I colour the border it colours the whole border and I understand since it is one long border.

I would help with this issue.

Thanks in advance.

You can do 2 things that I can think of:

1. Using border-image

You can use border-image to create a gradient for the border colour, with a cut-off point so it doesn't fade:

<ol class="relative text-gray-500 border-s border-gray-200 dark:border-gray-700 dark:text-gray-400" style="border-image: linear-gradient(to bottom,rgb(29 78 216) 33%,rgb(229 231 235) 33%) 1 100%;">

Here, the 33% (for both colours!) is about right to match for the first bar, but it's best to get a size that matches the exact height for one li item. Using your current step you could alter the value to match to whatever step you are (so on step 3 you would need 66% for example, to get 2 of the 3 bars coloured blue).

2. Using a different approach

The other method would require a bit of rework on your HTML/CSS; currently the ol is relative, but in this rework you would make the li relative so you could append a span with a background:

<span class="absolute left-0 top-4 -ml-px h-1/4 w-0.5 bg-blue-700"></span>

It would probably work better than approach 1 but would also probably be more work considering your current structure, as you'd need to reposition all the dots based on li relativeness instead of the ol.