<div class="progress">
   <div class="progress__arrow">
      <span></span>
   </div>
   <div class="progress__inner">
   </div>
   <div class="progress__item pi1" data="12.5">
      <svg xmlns="http://www.w3.org/2000/svg" width="66" height="66" viewBox="0 0 66 66" fill="none">
         <circle cx="33" cy="33" r="32" stroke="url(#paint0_linear)" stroke-width="2"></circle>
         <path d="M48.2904 30.2159L46.6944 29.8322C46.3447 28.307 45.7514 26.8724 44.9256 25.5531L45.7359 24.2017C45.9574 23.8328 45.8988 23.3604 45.5949 23.0564L42.9435 20.4051C42.6396 20.1011 42.1681 20.0425 41.7982 20.2641L40.4469 21.0743C39.1276 20.2485 37.6929 19.6553 36.1677 19.3055L35.7841 17.7095C35.6798 17.293 35.3053 17 34.875 17H31.125C30.6947 17 30.3202 17.293 30.2159 17.7096L29.8322 19.3056C28.307 19.6553 26.8724 20.2486 25.5531 21.0744L24.2017 20.2641C23.8319 20.0426 23.3613 20.1012 23.0564 20.4051L20.4051 23.0564C20.1011 23.3604 20.0425 23.8328 20.2641 24.2017L21.0743 25.5531C20.2485 26.8723 19.6553 28.307 19.3055 29.8322L17.7095 30.2159C17.293 30.3202 17 30.6947 17 31.125V34.875C17 35.3053 17.293 35.6797 17.7096 35.7841L19.3056 36.1677C19.6553 37.693 20.2486 39.1276 21.0744 40.4469L20.2641 41.7983C20.0426 42.1672 20.1012 42.6396 20.4051 42.9436L23.0565 45.5949C23.3596 45.9008 23.8319 45.9566 24.2018 45.7359L25.5531 44.9257C26.8724 45.7515 28.3071 46.3447 29.8323 46.6945L30.2159 48.2905C30.3203 48.7071 30.6947 49 31.125 49H34.875C35.3053 49 35.6797 48.707 35.7841 48.2904L36.1677 46.6944C37.693 46.3447 39.1276 45.7514 40.4469 44.9256L41.7983 45.7359C42.1681 45.9565 42.6387 45.8988 42.9436 45.5949L45.5949 42.9435C45.8989 42.6396 45.9575 42.1671 45.7359 41.7982L44.9257 40.4469C45.7515 39.1276 46.3447 37.6929 46.6945 36.1677L48.2905 35.7841C48.7071 35.6798 49 35.3053 49 34.875V31.125C49 30.6947 48.707 30.3202 48.2904 30.2159ZM33 41.4375C28.3473 41.4375 24.5625 37.6527 24.5625 33C24.5625 28.3473 28.3473 24.5625 33 24.5625C37.6527 24.5625 41.4375 28.3473 41.4375 33C41.4375 37.6527 37.6527 41.4375 33 41.4375Z" fill="url(#paint0_linear)"></path>
         <path d="M33 26.4375C31.4491 26.4375 30.1875 27.6991 30.1875 29.25C30.1875 30.8009 31.4491 32.0625 33 32.0625C34.5509 32.0625 35.8125 30.8009 35.8125 29.25C35.8125 27.6991 34.5509 26.4375 33 26.4375Z" fill="url(#paint0_linear)"></path>
         <path d="M36.7261 32.0625C35.8695 33.194 34.5252 33.9375 33 33.9375C31.4748 33.9375 30.1305 33.194 29.2739 32.0625C28.6791 32.8484 28.3125 33.8158 28.3125 34.875V36.75C28.3125 37.2682 28.7318 37.6875 29.25 37.6875H36.75C37.2682 37.6875 37.6875 37.2682 37.6875 36.75V34.875C37.6875 33.8158 37.3209 32.8484 36.7261 32.0625Z" fill="url(#paint0_linear)"></path>
         <defs>
            <linearGradient id="paint0_linear" x1="5.05313" y1="-7.11629e-06" x2="69.5554" y2="8.53068" gradientUnits="userSpaceOnUse">
               <stop stop-color="#22368D"></stop>
               <stop offset="1" stop-color="#4584E4"></stop>
            </linearGradient>
         </defs>
      </svg>
      Результат для клиента
   </div>
   <div class="progress__item pi2" data="25">
      <svg xmlns="http://www.w3.org/2000/svg" width="66" height="66" viewBox="0 0 66 66" fill="none">
         <circle cx="33" cy="33" r="32" stroke="url(#paint0_linear)" stroke-width="2"></circle>
         <path d="M42.4375 32.125C39.8529 32.125 37.75 34.2279 37.75 36.8125C37.75 39.3971 39.8529 41.5 42.4375 41.5C45.0221 41.5 47.125 39.3971 47.125 36.8125C47.125 34.2279 45.0221 32.125 42.4375 32.125Z" fill="url(#paint1_linear)"></path>
         <path d="M46.1875 17H19.8125C18.2616 17 17 18.2616 17 19.8125V27.3125C17 28.8634 18.2616 30.1875 19.8125 30.1875H30.1875V33C30.1875 33.7539 31.0284 34.1911 31.645 33.78L37.0338 30.1875H46.1875C47.7384 30.1875 49 28.8634 49 27.3125V19.8125C49 18.2616 47.7384 17 46.1875 17ZM36.75 26.375H21.6875C21.1693 26.375 20.75 25.9557 20.75 25.4375C20.75 24.9193 21.1693 24.5 21.6875 24.5H36.75C37.2682 24.5 37.6875 24.9193 37.6875 25.4375C37.6875 25.9557 37.2682 26.375 36.75 26.375ZM44.3125 22.625H21.6875C21.1693 22.625 20.75 22.2057 20.75 21.6875C20.75 21.1693 21.1693 20.75 21.6875 20.75H44.3125C44.8307 20.75 45.25 21.1693 45.25 21.6875C45.25 22.2057 44.8307 22.625 44.3125 22.625Z" fill="url(#paint2_linear)"></path>
         <path d="M47.0157 41.5C45.8321 42.6562 44.2187 43.375 42.4375 43.375C40.6563 43.375 39.0429 42.6562 37.8593 41.5C36.6386 42.6925 35.875 44.3505 35.875 46.1875V48.0625C35.875 48.5807 36.2943 49 36.8125 49H48.0625C48.5807 49 49 48.5807 49 48.0625V46.1875C49 44.3505 48.2364 42.6925 47.0157 41.5Z" fill="url(#paint3_linear)"></path>
         <path d="M23.5625 32.125C20.9779 32.125 18.875 34.2279 18.875 36.8125C18.875 39.3971 20.9779 41.5 23.5625 41.5C26.1471 41.5 28.25 39.3971 28.25 36.8125C28.25 34.2279 26.1471 32.125 23.5625 32.125Z" fill="url(#paint4_linear)"></path>
         <path d="M28.1407 41.5C26.957 42.6562 25.3436 43.375 23.5625 43.375C21.7814 43.375 20.1679 42.6562 18.9843 41.5C17.7636 42.6925 17 44.3505 17 46.1875V48.0625C17 48.5807 17.4193 49 17.9375 49H29.1875C29.7057 49 30.125 48.5807 30.125 48.0625V46.1875C30.125 44.3505 29.3614 42.6925 28.1407 41.5Z" fill="url(#paint5_linear)"></path>
         <defs>
            <linearGradient id="paint0_linear" x1="5.05313" y1="-7.11629e-06" x2="69.5554" y2="8.53068" gradientUnits="userSpaceOnUse">
               <stop stop-color="#22368D"></stop>
               <stop offset="1" stop-color="#4584E4"></stop>
            </linearGradient>
            <linearGradient id="paint1_linear" x1="38.4678" y1="32.125" x2="47.63" y2="33.3367" gradientUnits="userSpaceOnUse">
               <stop stop-color="#22368D"></stop>
               <stop offset="1" stop-color="#4584E4"></stop>
            </linearGradient>
            <linearGradient id="paint2_linear" x1="19.45" y1="17" x2="49.401" y2="24.4835" gradientUnits="userSpaceOnUse">
               <stop stop-color="#22368D"></stop>
               <stop offset="1" stop-color="#4584E4"></stop>
            </linearGradient>
            <linearGradient id="paint3_linear" x1="36.8799" y1="41.5" x2="49.2678" y2="44.3671" gradientUnits="userSpaceOnUse">
               <stop stop-color="#22368D"></stop>
               <stop offset="1" stop-color="#4584E4"></stop>
            </linearGradient>
            <linearGradient id="paint4_linear" x1="19.5928" y1="32.125" x2="28.755" y2="33.3367" gradientUnits="userSpaceOnUse">
               <stop stop-color="#22368D"></stop>
               <stop offset="1" stop-color="#4584E4"></stop>
            </linearGradient>
            <linearGradient id="paint5_linear" x1="18.0049" y1="41.5" x2="30.3928" y2="44.3671" gradientUnits="userSpaceOnUse">
               <stop stop-color="#22368D"></stop>
               <stop offset="1" stop-color="#4584E4"></stop>
            </linearGradient>
         </defs>
      </svg>
      Дружеская атмосфера <br>
      в команде
   </div>
   <div class="progress__item pi3" data="37.5">
      <svg xmlns="http://www.w3.org/2000/svg" width="66" height="66" viewBox="0 0 66 66" fill="none">
         <circle cx="33" cy="33" r="32" stroke="url(#paint0_linear)" stroke-width="2"></circle>
         <path d="M47.125 36.3103H45.25V35.2478C45.25 34.7301 44.8302 34.3103 44.3125 34.3103H36.8125C36.2947 34.3103 35.875 34.7301 35.875 35.2478V43.0633C35.875 44.6141 37.1367 45.8758 38.6875 45.8758H42.4375C43.9329 45.8758 45.1589 44.7027 45.2447 43.2286C47.3514 43.0114 49 41.2262 49 39.0631V38.1853C49 37.1514 48.1589 36.3103 47.125 36.3103ZM47.125 39.0631C47.125 40.1887 46.3166 41.1291 45.25 41.3342V38.1853H47.125V39.0631Z" fill="url(#paint1_linear)"></path>
         <path d="M29.6562 21.9993C30.1732 21.9993 30.5938 21.5787 30.5938 21.0618C30.5938 20.5448 30.1732 20.1243 29.6562 20.1243C29.1393 20.1243 28.7188 20.5448 28.7188 21.0618C28.7188 21.5787 29.1393 21.9993 29.6562 21.9993Z" fill="url(#paint2_linear)"></path>
         <path d="M42.3125 32.4353V21.0618C42.3125 20.544 41.8927 20.1243 41.375 20.1243H32.3075C32.4116 20.4177 32.4688 20.7331 32.4688 21.0618C32.4688 22.6126 31.2071 23.8743 29.6562 23.8743C28.1054 23.8743 26.8438 22.6126 26.8438 21.0618C26.8438 20.7331 26.9009 20.4177 27.005 20.1243H17.9375C17.4197 20.1243 17 20.544 17 21.0618V34.3133H34.1602C34.5464 33.2206 35.5892 32.4353 36.8125 32.4353H42.3125Z" fill="url(#paint3_linear)"></path>
         <path d="M34 36.1882H17V37.9367C17 38.4545 17.4197 38.8742 17.9375 38.8742H34V36.1882Z" fill="url(#paint4_linear)"></path>
         <path d="M34 40.7493H25.3125V42.1868H23.3743C22.8566 42.1868 22.4368 42.6065 22.4368 43.1243C22.4368 43.642 22.8566 44.0618 23.3743 44.0618H34.1081C34.038 43.7398 34 43.406 34 43.0633V40.7493Z" fill="url(#paint5_linear)"></path>
         <defs>
            <linearGradient id="paint0_linear" x1="5.05313" y1="-7.11629e-06" x2="69.5554" y2="8.53068" gradientUnits="userSpaceOnUse">
               <stop stop-color="#22368D"></stop>
               <stop offset="1" stop-color="#4584E4"></stop>
            </linearGradient>
            <linearGradient id="paint1_linear" x1="36.8799" y1="34.3103" x2="49.6439" y2="36.226" gradientUnits="userSpaceOnUse">
               <stop stop-color="#22368D"></stop>
               <stop offset="1" stop-color="#4584E4"></stop>
            </linearGradient>
            <linearGradient id="paint2_linear" x1="28.8623" y1="20.1243" x2="30.6948" y2="20.3666" gradientUnits="userSpaceOnUse">
               <stop stop-color="#22368D"></stop>
               <stop offset="1" stop-color="#4584E4"></stop>
            </linearGradient>
            <linearGradient id="paint3_linear" x1="18.938" y1="20.1243" x2="42.7815" y2="25.7498" gradientUnits="userSpaceOnUse">
               <stop stop-color="#22368D"></stop>
               <stop offset="1" stop-color="#4584E4"></stop>
            </linearGradient>
            <linearGradient id="paint4_linear" x1="18.3016" y1="36.1882" x2="28.2418" y2="44.5087" gradientUnits="userSpaceOnUse">
               <stop stop-color="#22368D"></stop>
               <stop offset="1" stop-color="#4584E4"></stop>
            </linearGradient>
            <linearGradient id="paint5_linear" x1="23.3304" y1="40.7493" x2="32.8658" y2="45.1926" gradientUnits="userSpaceOnUse">
               <stop stop-color="#22368D"></stop>
               <stop offset="1" stop-color="#4584E4"></stop>
            </linearGradient>
         </defs>
      </svg>
      Работа в удовольствие
   </div>
   <div class="progress__item pi4" data="62.5">
      Надежность и качество
      <svg xmlns="http://www.w3.org/2000/svg" width="66" height="66" viewBox="0 0 66 66" fill="none">
         <circle cx="33" cy="33" r="32" stroke="url(#paint000_linear)" stroke-width="2"></circle>
         <g clip-path="url(#clip0)">
            <path d="M40.8772 42.1882C40.3581 42.884 39.5332 43.3125 38.625 43.3125C37.7168 43.3125 36.8919 42.884 36.3728 42.1882C36.1859 42.2145 35.9986 42.2137 35.8125 42.203C35.8125 43.775 35.8125 41.675 35.8125 48.4554C35.8125 48.8594 36.239 49.1219 36.5988 48.9419L38.2057 48.1385C38.4694 48.0067 38.7806 48.0067 39.0443 48.1385L40.6512 48.9419C41.0119 49.1224 41.4375 48.8605 41.4375 48.4554C41.4375 41.6754 41.4375 43.7746 41.4375 42.2023C41.2513 42.2132 41.0639 42.2142 40.8772 42.1882Z" fill="url(#paint111_linear)"></path>
            <path d="M42.6588 35.8556C42.1096 35.682 41.8394 35.0527 42.1095 34.5299C42.2981 34.1665 42.2304 33.7261 41.9392 33.4368C41.6489 33.1438 41.2068 33.0752 40.8451 33.2656C40.3204 33.5318 39.6938 33.2677 39.5194 32.7163C39.2723 31.9344 37.9777 31.9344 37.7305 32.7163C37.5567 33.266 36.9263 33.5341 36.4048 33.2656C36.0404 33.0742 35.601 33.1439 35.3117 33.4359C35.0196 33.7262 34.9519 34.1665 35.1405 34.53C35.4106 35.0527 35.1404 35.682 34.5912 35.8556C34.2003 35.9792 33.9375 36.339 33.9375 36.7501C33.9375 37.1612 34.2003 37.521 34.5912 37.6446C35.1404 37.8181 35.4106 38.4475 35.1405 38.9703C34.9519 39.3337 35.0196 39.7741 35.3108 40.0634C35.6011 40.3555 36.0414 40.4241 36.4049 40.2346C36.9247 39.9676 37.5552 40.229 37.7306 40.7839C37.9777 41.5658 39.2723 41.5658 39.5195 40.7839C39.6941 40.2314 40.3249 39.9687 40.8452 40.2346C41.2059 40.4232 41.649 40.3555 41.9383 40.0643C42.2304 39.774 42.2981 39.3337 42.1095 38.9702C41.8394 38.4475 42.1096 37.818 42.6588 37.6445C43.0497 37.521 43.3125 37.1612 43.3125 36.7501C43.3125 36.339 43.0497 35.9792 42.6588 35.8556ZM38.625 39.5626C37.0741 39.5626 35.8125 38.301 35.8125 36.7501C35.8125 35.1992 37.0741 33.9376 38.625 33.9376C40.1759 33.9376 41.4375 35.1992 41.4375 36.7501C41.4375 38.301 40.1759 39.5626 38.625 39.5626Z" fill="url(#paint222_linear)"></path>
            <path d="M38.625 35.8125C38.1077 35.8125 37.6875 36.2327 37.6875 36.75C37.6875 37.2673 38.1077 37.6875 38.625 37.6875C39.1423 37.6875 39.5625 37.2673 39.5625 36.75C39.5625 36.2327 39.1423 35.8125 38.625 35.8125Z" fill="url(#paint333_linear)"></path>
            <path d="M46.1875 17H19.8125C18.2616 17 17 18.2616 17 19.8125V40.5C17 42.0509 18.2616 43.3125 19.8125 43.3125H33.9375V41.3307C33.3338 40.6939 33.0658 39.8376 33.1868 39.0023C32.4909 38.4831 32.0625 37.6582 32.0625 36.75C32.0625 35.8418 32.4909 35.0169 33.1868 34.4978C33.0623 33.6381 33.3424 32.7519 33.9851 32.1092C34.6259 31.4674 35.5076 31.1854 36.3727 31.3118C37.4109 29.9201 39.8389 29.9201 40.8771 31.3118C41.7396 31.1863 42.6231 31.4674 43.2658 32.1101C43.9076 32.7519 44.1877 33.6381 44.0632 34.4977C44.7591 35.0169 45.1875 35.8418 45.1875 36.75C45.1875 37.6582 44.7591 38.4831 44.0632 39.0022C44.1842 39.8371 43.9164 40.6928 43.3125 41.3305V43.3125H46.1875C47.7384 43.3125 49 42.0509 49 40.5V19.8125C49 18.2616 47.7384 17 46.1875 17ZM26.7122 22.9622L28.5872 21.0872C28.9534 20.721 29.5467 20.721 29.9129 21.0872L31.125 22.2993L32.3372 21.0871C32.7034 20.7209 33.2967 20.7209 33.6629 21.0871L34.875 22.2993L36.0872 21.0871C36.4534 20.7209 37.0467 20.7209 37.4129 21.0871L39.2879 22.9621C39.6541 23.3283 39.6541 23.9216 39.2879 24.2878C38.9217 24.654 38.3284 24.654 37.9622 24.2878L36.75 23.0757L35.5378 24.2879C35.1716 24.6541 34.5783 24.6541 34.2121 24.2879L33 23.0757L31.7878 24.2879C31.4216 24.6541 30.8283 24.6541 30.4621 24.2879L29.25 23.0757L28.0378 24.2879C27.6716 24.6541 27.0783 24.6541 26.7121 24.2879C26.3459 23.9217 26.3459 23.3284 26.7122 22.9622ZM29.25 39.5625H21.6875C21.1693 39.5625 20.75 39.1432 20.75 38.625C20.75 38.1068 21.1693 37.6875 21.6875 37.6875H29.25C29.7682 37.6875 30.1875 38.1068 30.1875 38.625C30.1875 39.1432 29.7682 39.5625 29.25 39.5625ZM29.25 35.8125H21.6875C21.1693 35.8125 20.75 35.3932 20.75 34.875C20.75 34.3568 21.1693 33.9375 21.6875 33.9375H29.25C29.7682 33.9375 30.1875 34.3568 30.1875 34.875C30.1875 35.3932 29.7682 35.8125 29.25 35.8125ZM29.25 32.0625H21.6875C21.1693 32.0625 20.75 31.6432 20.75 31.125C20.75 30.6068 21.1693 30.1875 21.6875 30.1875H29.25C29.7682 30.1875 30.1875 30.6068 30.1875 31.125C30.1875 31.6432 29.7682 32.0625 29.25 32.0625ZM44.25 28.3125H21.6875C21.1693 28.3125 20.75 27.8932 20.75 27.375C20.75 26.8568 21.1693 26.4375 21.6875 26.4375H44.25C44.7682 26.4375 45.1875 26.8568 45.1875 27.375C45.1875 27.8932 44.7682 28.3125 44.25 28.3125Z" fill="url(#paint444_linear)"></path>
         </g>
         <defs>
            <linearGradient id="paint000_linear" x1="5.05313" y1="-7.11629e-06" x2="69.5554" y2="8.53068" gradientUnits="userSpaceOnUse">
               <stop stop-color="#22368D"></stop>
               <stop offset="1" stop-color="#4584E4"></stop>
            </linearGradient>
            <linearGradient id="paint111_linear" x1="36.2432" y1="42.1882" x2="41.7707" y2="42.7919" gradientUnits="userSpaceOnUse">
               <stop stop-color="#22368D"></stop>
               <stop offset="1" stop-color="#4584E4"></stop>
            </linearGradient>
            <linearGradient id="paint222_linear" x1="34.6553" y1="32.1299" x2="43.8129" y2="33.3587" gradientUnits="userSpaceOnUse">
               <stop stop-color="#22368D"></stop>
               <stop offset="1" stop-color="#4584E4"></stop>
            </linearGradient>
            <linearGradient id="paint333_linear" x1="37.8311" y1="35.8125" x2="39.6635" y2="36.0548" gradientUnits="userSpaceOnUse">
               <stop stop-color="#22368D"></stop>
               <stop offset="1" stop-color="#4584E4"></stop>
            </linearGradient>
            <linearGradient id="paint444_linear" x1="19.45" y1="17" x2="50.4684" y2="21.989" gradientUnits="userSpaceOnUse">
               <stop stop-color="#22368D"></stop>
               <stop offset="1" stop-color="#4584E4"></stop>
            </linearGradient>
            <clipPath id="clip0">
               <rect width="32" height="32" fill="white" transform="translate(17 17)"></rect>
            </clipPath>
         </defs>
      </svg>
   </div>
   <div class="progress__item pi5" data="75">
      Высокая Мотивация и <br>
      Профессионализм
      <svg width="75" height="66" viewBox="0 0 75 66" fill="none" xmlns="http://www.w3.org/2000/svg">
         <circle cx="42" cy="33" r="32" stroke="url(#paint00_linear)" stroke-width="2"></circle>
         <g clip-path="url(#clip00)">
            <path d="M42 37.6876C41.6839 37.6876 41.3759 37.6492 41.0625 37.6365V39.5626H42.9375V37.6379C42.6242 37.6506 42.3159 37.6876 42 37.6876Z" fill="url(#paint11_linear)"></path>
            <path d="M52.375 35.1427V37.6875H50.5V36.0301C48.6937 36.7634 46.7515 37.2579 44.8125 37.4983V40.5C44.8125 41.0182 44.3932 41.4375 43.875 41.4375H40.125C39.6068 41.4375 39.1875 41.0182 39.1875 40.5V37.5012C37.2471 37.2611 35.3051 36.7664 33.5 36.033V37.6875H31.625V35.1438C29.5179 34.0417 27.6142 32.6182 26 30.922V44.25C26 46.8346 28.1029 49 30.6875 49C38.3394 49 44.7366 49 53.3125 49C55.8971 49 58 46.8346 58 44.25V30.8894C56.3858 32.5913 54.4973 34.0332 52.375 35.1427ZM33.5 47.125H31.625V43.3125H33.5V47.125ZM33.5 41.4375H31.625V39.5625H33.5V41.4375ZM52.375 47.125H50.5V43.3125H52.375V47.125ZM52.375 41.4375H50.5V39.5625H52.375V41.4375Z" fill="url(#paint22_linear)"></path>
            <path d="M46.75 17H37.25C35.1818 17 33.5 18.6818 33.5 20.75V22.6875H37.25V20.75H46.75V22.6875H50.5V20.75C50.5 18.6818 48.8182 17 46.75 17Z" fill="url(#paint33_linear)"></path>
            <path d="M55.1875 24.5625C39.4982 24.5625 47.3706 24.5625 29.1641 24.5625C27.4191 24.5625 26 25.9816 26 27.7266V28.0168C27.5166 30.014 29.4297 31.7024 31.625 32.9949V26.4375H33.5V33.985C38.7967 36.3814 45.1976 36.398 50.5 33.9973V26.4375H52.375V32.9863C54.5791 31.6899 56.4827 30.0018 58 27.9983V27.375C58 25.8241 56.7384 24.5625 55.1875 24.5625Z" fill="url(#paint44_linear)"></path>
         </g>
         <defs>
            <linearGradient id="paint00_linear" x1="14.0531" y1="-7.11629e-06" x2="78.5554" y2="8.53068" gradientUnits="userSpaceOnUse">
               <stop stop-color="#22368D"></stop>
               <stop offset="1" stop-color="#4584E4"></stop>
            </linearGradient>
            <linearGradient id="paint11_linear" x1="41.2061" y1="37.6365" x2="43.0402" y2="37.8726" gradientUnits="userSpaceOnUse">
               <stop stop-color="#22368D"></stop>
               <stop offset="1" stop-color="#4584E4"></stop>
            </linearGradient>
            <linearGradient id="paint22_linear" x1="28.45" y1="30.8894" x2="58.6232" y2="37.9403" gradientUnits="userSpaceOnUse">
               <stop stop-color="#22368D"></stop>
               <stop offset="1" stop-color="#4584E4"></stop>
            </linearGradient>
            <linearGradient id="paint33_linear" x1="34.8016" y1="17" x2="49.4217" y2="22.7795" gradientUnits="userSpaceOnUse">
               <stop stop-color="#22368D"></stop>
               <stop offset="1" stop-color="#4584E4"></stop>
            </linearGradient>
            <linearGradient id="paint44_linear" x1="28.45" y1="24.5625" x2="56.3121" y2="35.0649" gradientUnits="userSpaceOnUse">
               <stop stop-color="#22368D"></stop>
               <stop offset="1" stop-color="#4584E4"></stop>
            </linearGradient>
            <clipPath id="clip0">
               <rect width="32" height="32" fill="white" transform="translate(26 17)"></rect>
            </clipPath>
         </defs>
      </svg>
   </div>
   <div class="progress__item pi6" data="87.5">
      Достижение целей
      <svg xmlns="http://www.w3.org/2000/svg" width="66" height="66" viewBox="0 0 66 66" fill="none">
         <circle cx="33" cy="33" r="32" stroke="url(#paint0_linear)" stroke-width="2"></circle>
         <path d="M43.5038 27.3778L46.9023 22.2698C47.3225 21.6473 46.8729 20.8086 46.1249 20.8086H33.7465C33.8651 20.4979 33.9375 20.1644 33.9375 19.8125C33.9375 18.2616 32.6759 17 31.125 17C29.5741 17 28.3125 18.2616 28.3125 19.8125C28.3125 21.0331 29.0986 22.064 30.1875 22.4523V43.375H29.25C28.7318 43.375 28.3125 43.7943 28.3125 44.3125C28.3125 44.8307 28.7318 45.25 29.25 45.25H33C33.5182 45.25 33.9375 44.8307 33.9375 44.3125C33.9375 43.7943 33.5182 43.375 33 43.375H32.0625V33.9375H46.125C46.871 33.9375 47.3201 33.1036 46.905 32.48L43.5038 27.3778ZM31.125 20.75C30.6077 20.75 30.1875 20.3298 30.1875 19.8125C30.1875 19.2952 30.6077 18.875 31.125 18.875C31.6423 18.875 32.0625 19.2952 32.0625 19.8125C32.0625 20.3298 31.6423 20.75 31.125 20.75Z" fill="url(#paint1_linear)"></path>
         <path d="M44.3125 39.625H33.9375V41.6727C35.0264 42.061 35.8125 43.0919 35.8125 44.3125C35.8125 45.8634 34.5509 47.125 33 47.125H29.25C27.6991 47.125 26.4375 45.8634 26.4375 44.3125C26.4375 43.0919 27.2236 42.061 28.3125 41.6727V39.625H21.6875C19.1029 39.625 17 41.7279 17 44.3125C17 46.8971 19.1029 49 21.6875 49H44.3125C46.8971 49 49 46.8971 49 44.3125C49 41.7279 46.8971 39.625 44.3125 39.625Z" fill="url(#paint2_linear)"></path>
         <defs>
            <linearGradient id="paint0_linear" x1="5.05313" y1="-7.11629e-06" x2="69.5554" y2="8.53068" gradientUnits="userSpaceOnUse">
               <stop stop-color="#22368D"></stop>
               <stop offset="1" stop-color="#4584E4"></stop>
            </linearGradient>
            <linearGradient id="paint1_linear" x1="29.7481" y1="17" x2="48.2518" y2="18.6243" gradientUnits="userSpaceOnUse">
               <stop stop-color="#22368D"></stop>
               <stop offset="1" stop-color="#4584E4"></stop>
            </linearGradient>
            <linearGradient id="paint2_linear" x1="19.45" y1="39.625" x2="45.884" y2="51.558" gradientUnits="userSpaceOnUse">
               <stop stop-color="#22368D"></stop>
               <stop offset="1" stop-color="#4584E4"></stop>
            </linearGradient>
         </defs>
      </svg>
   </div>
</div>

.progress {
  width: 394px;
  height: 394px;
  background: none;
  margin: 0;
  box-shadow: none;
  position: relative;
  border-radius: 100%;
  &__arrow {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9;
    transition: transform 0.55s;
  }
  &__arrow span {
    background: red
      url("https://fonts.gstatic.com/s/i/materialicons/double_arrow/v5/24px.svg")
      center/ 100% 100%;
    position: absolute;
    width: 40px;
    height: 48px;
    left: 177px;
    top: -25px;
    transform: rotate(-37deg);
  }
  &__arrow:before {
    content: "";
    left: -2px;
    top: 27px;
    position: absolute;
    width: 215px;
    height: 61px;
    transform: rotate(-38deg);
    background: url("http://jetbi.fbdev.by/assets/img/plain.png");
  }
}

.progress:after {
  content: "";
  width: 384px;
  height: 384px;
  border-radius: 100%;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0.25;
  border: 5px solid #3e77d6;
}

.progress {
  margin: auto;
  &__inner {
    position: absolute;
    top: 15px;
    left: 15px;
    width: calc(100% - 30px);
    height: calc(100% - 30px);
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 100%;
  }
  &__item {
    position: absolute;
    font-weight: bold;
    font-size: 30px;
    line-height: 35px;
    display: flex;
    align-items: center;
  }
  &__item svg {
    margin: 0 14px;
  }
  &__item.pi1 {
    right: -103%;
  }
  &__item.pi3 {
    right: -107%;
  }
  &__item.pi2 {
    right: -116%;
  }
  &__item.pi5 {
    left: -116%;
  }
  &__item.pi4 {
    left: -107%;
  }
  &__item.pi6 {
    left: -90%;
  }
  &__item.pi4,
  &__item.pi5,
  &__item.pi6 {
    text-align: right;
  }
  &__item.pi2,
  &__item.pi5 {
    top: 50%;
    transform: translateY(-50%);
  }
  &__item.pi3,
  &__item.pi4 {
    bottom: 0;
  }
}

.progress-ring {
  position: absolute;
}

const items = document.querySelectorAll(".progress__item");
const arrow = document.querySelector(".progress__arrow");

let current = 0;
function setProgress(percent) {
  const da = (percent - (current % 100) + 100) % 100 + 100;
  current += da;
  const deg = (current / 100) * 360;
  arrow.style.transform = "rotate(" + deg + "deg)";
}

items.forEach((element) => {
  element.addEventListener("mouseenter", function () {
    const attr = +this.getAttribute("data");

    if (attr < 101 && attr > -1) {
      setProgress(attr);
    }
  });
});