Как анимировать полоску?

.progress {
  position: relative;
  padding: 0;
  display: flex;
  justify-content: center;
}

.progress>div {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  text-align: center;
}

.progress>div svg {
  width: 39px;
  height: 39px;
  stroke: #4173cc;
}

.popup-close {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

<div class="progress">
  <div>
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 40 40" preserveAspectRatio="none">
      <circle cx="20" cy="20" r="16" fill="none" stroke-width="4" transform="rotate(-90,20,20)"></circle>
    </svg>
    <div class="popup-close">
      x
    </div>
  </div>
</div>