<div class="i-progress d-flex flex-column flex-grow-1 justify-content-center gap-2 p-2 u-rounded-2 --incomplete">
  <header class="i-progress__header d-flex gap-1 align-items-center justify-content-center u-fz-sm">
      
  <span class="icon d-flex align-items-center justify-content-center  --xl i-progress__icon">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><mask id="mask0_3554_68154" width="24" height="24" x="0" y="0" maskUnits="userSpaceOnUse" style="mask-type:luminance"><path fill="#fff" d="M24 0H0v24h24V0Z"/></mask><g fill-rule="evenodd" clip-rule="evenodd" mask="url(#mask0_3554_68154)"><path fill="#15324F" d="m7.504 25.766-1.048-3.91 3.155-.846-.216-.804a2.84 2.84 0 0 1-.096-.827l.004-.124-8.87-4.993-.086-.319-.003-.012C-1.212 8.122 2.668 2.215 9.162.475c6.494-1.74 12.808 1.436 14.364 7.245l.089.331-5.185 8.76.065.104c.143.231.256.487.33.764l.216.804 2.853-.764 1.96 7.314-1.547.414-1.545-5.769-12.347 3.308.634 2.366-1.545.414Zm9.965-6.862-.216-.804a1.221 1.221 0 0 0-1.494-.863l-3.93 1.053a1.22 1.22 0 0 0-.862 1.495l.215.804 6.287-1.685ZM8.239 8.701l.026.45.32-.317c.633-.622 1.449-1.223 2.419-1.483s1.978-.148 2.837.075l.435.113-.202-.402c-1.24-2.45-3.141-3.952-4.217-4.654l-.191-.125-.102.203c-.582 1.146-1.477 3.397-1.325 6.14Zm.509 2.48 3.833 5.223 1.583-.424.708-6.44-.131-.063c-.821-.386-2.214-.849-3.317-.554-1.103.296-2.075 1.392-2.594 2.14l-.082.118Zm7.803-2.02-.704 6.408h.227c.317 0 .628.052.92.153l.158.053 4.716-7.968-.108-.112c-.398-.408-1.344-1.18-2.476-.878-1.19.32-2.226 1.568-2.706 2.303l-.027.041ZM7.495 3.205l.186-.492-.47.24C4.332 4.415 2.364 6.915 1.799 9.7l-.095.472.405-.26a3.63 3.63 0 0 1 1.038-.456c1.132-.303 2.315-.102 3.254.195l.298.094-.034-.31c-.275-2.516.246-4.69.83-6.23Zm-5.671 9.973 8.069 4.542.109-.125c.203-.233.446-.435.72-.593l.198-.113-3.815-5.197-.043-.022c-.782-.395-2.306-.96-3.495-.64-1.134.302-1.566 1.445-1.706 1.998l-.037.15Zm18.165-8.057.48.023-.317-.36c-1.882-2.13-4.836-3.31-8.064-3.139l-.525.028.408.333c1.276 1.04 2.815 2.664 3.834 4.98l.126.286.21-.23c.666-.727 1.589-1.493 2.722-1.796a3.652 3.652 0 0 1 1.126-.125Z"/><path fill="#FFF27D" d="m8.239 8.702.026.45.32-.317c.633-.622 1.449-1.223 2.419-1.483s1.978-.148 2.837.075l.435.113-.202-.402c-1.24-2.45-3.141-3.952-4.217-4.654l-.191-.125-.102.203c-.582 1.146-1.477 3.397-1.325 6.14Z"/></g></svg>      </span>

    <div class="i-progress__text --incomplete d-block">
      Nakupte ještě za
      <strong class="i-progress__remaining u-fw-700">500</strong>
      <strong class="i-progress__currency u-fw-700">Kč</strong>
      a dopravu máte <strong>zdarma</strong>
    </div>

    <div class="i-progress__text u-fw-700 --complete d-none">
      Dopravu máte ZDARMA
    </div>
  </header>

  <div class="i-progress__bar">
    <progress class="i-progress__input d-block w-100 overflow-hidden u-bg-white" max="100" value="42"></progress>
  </div>
</div>

        

          <div class="i-progress d-flex flex-column flex-grow-1 justify-content-center gap-2 p-2 u-rounded-2 --complete">
  <header class="i-progress__header d-flex gap-1 align-items-center justify-content-center u-fz-sm">
      
  <span class="icon d-flex align-items-center justify-content-center  --xl i-progress__icon">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><mask id="mask0_3554_68154" width="24" height="24" x="0" y="0" maskUnits="userSpaceOnUse" style="mask-type:luminance"><path fill="#fff" d="M24 0H0v24h24V0Z"/></mask><g fill-rule="evenodd" clip-rule="evenodd" mask="url(#mask0_3554_68154)"><path fill="#15324F" d="m7.504 25.766-1.048-3.91 3.155-.846-.216-.804a2.84 2.84 0 0 1-.096-.827l.004-.124-8.87-4.993-.086-.319-.003-.012C-1.212 8.122 2.668 2.215 9.162.475c6.494-1.74 12.808 1.436 14.364 7.245l.089.331-5.185 8.76.065.104c.143.231.256.487.33.764l.216.804 2.853-.764 1.96 7.314-1.547.414-1.545-5.769-12.347 3.308.634 2.366-1.545.414Zm9.965-6.862-.216-.804a1.221 1.221 0 0 0-1.494-.863l-3.93 1.053a1.22 1.22 0 0 0-.862 1.495l.215.804 6.287-1.685ZM8.239 8.701l.026.45.32-.317c.633-.622 1.449-1.223 2.419-1.483s1.978-.148 2.837.075l.435.113-.202-.402c-1.24-2.45-3.141-3.952-4.217-4.654l-.191-.125-.102.203c-.582 1.146-1.477 3.397-1.325 6.14Zm.509 2.48 3.833 5.223 1.583-.424.708-6.44-.131-.063c-.821-.386-2.214-.849-3.317-.554-1.103.296-2.075 1.392-2.594 2.14l-.082.118Zm7.803-2.02-.704 6.408h.227c.317 0 .628.052.92.153l.158.053 4.716-7.968-.108-.112c-.398-.408-1.344-1.18-2.476-.878-1.19.32-2.226 1.568-2.706 2.303l-.027.041ZM7.495 3.205l.186-.492-.47.24C4.332 4.415 2.364 6.915 1.799 9.7l-.095.472.405-.26a3.63 3.63 0 0 1 1.038-.456c1.132-.303 2.315-.102 3.254.195l.298.094-.034-.31c-.275-2.516.246-4.69.83-6.23Zm-5.671 9.973 8.069 4.542.109-.125c.203-.233.446-.435.72-.593l.198-.113-3.815-5.197-.043-.022c-.782-.395-2.306-.96-3.495-.64-1.134.302-1.566 1.445-1.706 1.998l-.037.15Zm18.165-8.057.48.023-.317-.36c-1.882-2.13-4.836-3.31-8.064-3.139l-.525.028.408.333c1.276 1.04 2.815 2.664 3.834 4.98l.126.286.21-.23c.666-.727 1.589-1.493 2.722-1.796a3.652 3.652 0 0 1 1.126-.125Z"/><path fill="#FFF27D" d="m8.239 8.702.026.45.32-.317c.633-.622 1.449-1.223 2.419-1.483s1.978-.148 2.837.075l.435.113-.202-.402c-1.24-2.45-3.141-3.952-4.217-4.654l-.191-.125-.102.203c-.582 1.146-1.477 3.397-1.325 6.14Z"/></g></svg>      </span>

    <div class="i-progress__text --incomplete d-none">
      Nakupte ještě za
      <strong class="i-progress__remaining u-fw-700">0</strong>
      <strong class="i-progress__currency u-fw-700">Kč</strong>
      a dopravu máte <strong>zdarma</strong>
    </div>

    <div class="i-progress__text u-fw-700 --complete d-block">
      Dopravu máte ZDARMA
    </div>
  </header>

  <div class="i-progress__bar">
    <progress class="i-progress__input d-block w-100 overflow-hidden u-bg-white" max="100" value="100"></progress>
  </div>
</div>