<div class="section-steps__content">
  <svg class="section-steps__arrow" width="14" height="14" fill="#7b8794" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 13" id="slider-arrow">
    <path d="M0.333252 12.0417L9.04159 6.50004L0.333252 0.958374V12.0417Z"></path>
  </svg>
  <ol class="section-steps__list">
    <li class="section-steps__item">
      <div class="section-steps__number">
        1
        <svg class="section-steps__circle circle-1" width="48" height="48" fill="none">
          <circle cx="24" cy="24" r="22" stroke="#32B978" stroke-width="2" />
        </svg>
      </div>
      <p class="section-steps__text">Заявка на необходимую Вам услугу Digital Express.</p>
    </li>
    <li class="section-steps__item">
      <div class="section-steps__number">
        2
        <svg class="section-steps__circle circle-2" width="48" height="48" fill="none">
          <circle cx="24" cy="24" r="22" stroke="#32B978" stroke-width="2" />
        </svg>
      </div>
      <p class="section-steps__text">Звонок/сообщение Вам от нас. Обсуждение проекта.</p>
    </li>
    <li class="section-steps__item">
      <div class="section-steps__number">
        3
        <svg class="section-steps__circle circle-3" width="48" height="48" fill="none">
          <circle cx="24" cy="24" r="22" stroke="#32B978" stroke-width="2" />
        </svg>
      </div>
      <p class="section-steps__text">Ваша оплата – наша работа.</p>
    </li>
    <li class="section-steps__item">
      <div class="section-steps__number">
        4
        <svg class="section-steps__circle circle-4" width="48" height="48" fill="none">
          <circle cx="24" cy="24" r="22" stroke="#32B978" stroke-width="2" />
        </svg>
      </div>
      <p class="section-steps__text">Информирование о промежуточных результатах.</p>
    </li>
    <li class="section-steps__item">
      <div class="section-steps__number">
        5
        <svg class="section-steps__circle circle-5" width="48" height="48" fill="none">
          <circle cx="24" cy="24" r="22" stroke="#32B978" stroke-width="2" />
        </svg>
      </div>
      <p class="section-steps__text">Выполнение проекта и сдача его строго в срок. ГОТОВО!</p>
    </li>
  </ol>
</div>

body {
  background-color: #1f2933;
}

.section-steps {
  &__content {
    position: relative;
  }

  &__list {
    list-style: none;
    padding: 0;
    margin: 56px 0 40px;
    display: flex;
    position: relative;
    &::before {
      content: "";
      position: absolute;
      width: 80%;
      height: 1px;
      top: 24px;
      left: 50%;
      transform: translateX(-50%);
      z-index: -1;
      background-image: linear-gradient(
        90deg,
        #52606d,
        #52606d 50%,
        transparent 50%,
        transparent 100%
      );
      background-size: 30px 1px;
    }
  }

  &__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    text-align: center;
    line-height: 1.24;
    color: #cbd2d9;
    margin: 0 12px;
  }

  $total: 5;
  $play: 1s;
  $stay: 2s;
  $frame-len: 100% / ($total);
  $play-part: $play / ($play + $stay);
  @for $n from 1 through $total {
    $i: $n - 1;
    &__item:nth-child(#{$n}) circle {
      animation-name: line-anim-#{$n};

      $frame-wait: $i * $frame-len;
      $frame-play: $n * $frame-len;
      @keyframes line-anim-#{$n} {
        0%,
        #{$frame-wait} {
          stroke-dashoffset: 138;
        }

        #{$frame-play - $frame-len * $play-part} {
          stroke-dashoffset: 138 - $n * 138 / $total;
        }

        #{$frame-play + $frame-len},
        100% {
          stroke-dashoffset: 138 - $n * 138 / $total;
        }
      }
    }
  }

  &__arrow {
    display: block;
    position: absolute;
    left: 10%;
    top: 24px;
    margin-top: -7px;
    animation: arrowMove ease infinite;
    animation-duration: ($play + $stay) * $total;
  }

  $from: 10%;
  $to: 90%;
  $offset: -38px;

  @keyframes arrowMove {
    0% {
      left: calc(#{$from} + #{$offset});
    }
    @for $n from 1 through $total {
      $i: $n - 1;
      $left: #{$from + $i * ($to - $from) / ($total - 1)};
      $frame-play: $n * $frame-len;
      #{$frame-play - $frame-len * $play-part},
      #{$frame-play - $frame-len} {
        left: calc(#{$left} + #{$offset});
      }
    }
    100% {
      left: calc(#{$to} + #{$offset});
    }
  }

  &__circle {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    width: 100%;
    height: 100%;
    transform: rotate(90deg);

    & circle {
      stroke-dasharray: 138;
      stroke-dasharray: 138;
      animation: ease infinite;
      animation-duration: ($play + $stay) * $total;
    }
  }

  &__number {
    flex: none;
    margin-bottom: 24px;
    width: 48px;
    height: 48px;
    position: relative;
    background-color: #323f4b;
    border-radius: 50%;
    color: #f5f7fa;
    font-size: 28px;
    line-height: 48px;
    font-weight: 500;
    text-align: center;
  }
}