Progress Bar

<div class="progress version-first position--relative border-radius">
    <div class="progress-bar position--absolute border-radius progress-color-1" role="progressbar" aria-valuenow="0" aria-valuemin="33" aria-valuemax="100" style="width: 33%;"></div>
    <div class="progress-bar position--absolute border-radius progress-color-2" role="progressbar" aria-valuenow="0" aria-valuemin="40" aria-valuemax="100" style="width: 40%;"></div>
    <div class="icon-parent position--absolute" style="left: 70%;">
        <svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" fill="none">
        <rect width="30" height="30" rx="15" fill="#222222" />
        <path fill-rule="evenodd" clip-rule="evenodd" d="M10.5 8C10.2239 8 10 8.22386 10 8.5V9.9981V10.5C10 10.5007 10 10.5014 10 10.5021V21.5C10 21.6786 10.0976 21.8437 10.256 21.933C10.4145 22.0223 10.6097 22.0223 10.7682 21.933C10.9266 21.8437 11.0243 21.6786 11.0243 21.5V16.8589C12.4703 16.3495 14.0601 16.393 15.4745 16.9809C17.564 17.6874 19.2807 17.6874 20.9394 16.9644C21.0342 16.9262 21.1155 16.862 21.1736 16.7796C21.2317 16.6971 21.264 16.6 21.2667 16.4999V9.9998C21.265 9.83539 21.1815 9.68208 21.0427 9.58884C20.904 9.49561 20.7276 9.47412 20.5696 9.53129L20.5696 9.53168C18.4321 10.3397 17.1435 9.94471 15.7792 9.52618C14.4496 9.11759 13.078 8.69672 11 9.30656V8.5C11 8.22386 10.7761 8 10.5 8Z" fill="white" />
        </svg>
    </div>
    </div>
    <ul class="progress--labels m-t-8 m-b-0 p-a-0 display--flex">
    <li class="progress--label-item display--inline-flex items--center">
        <span class="progress-indicator display--inline-flex rounded-pill progress-color-1"></span>
        <label class="para--three">Lorem Ipsum</label>
    </li>
    <li class="progress--label-item display--inline-flex items--center">
        <span class="progress-indicator display--inline-flex rounded-pill progress-color-2"></span>
        <label class="para--three">Lorem Ipsum</label>
    </li>
    <li class="progress--label-item display--inline-flex items--center">
        <span class="progress-indicator display--inline-flex rounded-pill progress-color-3"></span>
        <label class="para--three">Lorem Ipsum</label>
    </li>
    <li class="progress--label-item display--inline-flex items--center">
        <span class="display--inline-flex rounded-pill">
        <svg xmlns="http://www.w3.org/2000/svg" width="12" height="14" viewBox="0 0 12 14" fill="none">
            <path fill-rule="evenodd" clip-rule="evenodd" d="M0.5 0C0.223858 0 0 0.223858 0 0.5V1.9981V2.5C0 2.50071 1.48811e-06 2.50142 4.4614e-06 2.50213V13.5C4.4614e-06 13.6786 0.097615 13.8437 0.256034 13.933C0.414496 14.0223 0.609719 14.0223 0.768181 13.933C0.926643 13.8437 1.02425 13.6786 1.02425 13.5V8.8589C2.47029 8.34948 4.06012 8.39302 5.47453 8.98091C7.56402 9.68742 9.28068 9.68742 10.9394 8.96441C11.0342 8.92624 11.1155 8.862 11.1736 8.77956C11.2317 8.69709 11.264 8.59997 11.2667 8.49993V1.9998C11.265 1.83539 11.1815 1.68208 11.0427 1.58884C10.904 1.49561 10.7276 1.47412 10.5696 1.53129L10.5696 1.53168C8.43207 2.33971 7.14349 1.94471 5.77923 1.52618C4.44959 1.11759 3.07796 0.696717 1 1.30656V0.5C1 0.223858 0.776142 0 0.5 0Z" fill="#222222" />
        </svg>
        </span>
        <label class="para--three">Lorem Ipsum (XX%)</label>
    </li>
    </ul>