Как реализовать заполнение обводки по кругу в соответствии прогрессу?

Question

День добрый, подскажите пожалуйста как можно имея прогресс от 0 до 100 сделать такую обводку? Заранее спасибо)

Answer 1

Вот чот я сделал для вас, дальше дело за вами

const test = document.querySelector(".test");

const myInterval = setInterval(myTimer, 10);
var num = 0;

function myTimer() {
  test.style.cssText = "background: conic-gradient(black " + num + "%, transparent 0 " + (100 - num) + "%);";
  num++;
  if (num == 105) {
    clearInterval(myInterval);
  }
}

.text {
  position: relative;
  display: inline-block;
  padding: 24px 36px;
  border-radius: 12px;
  background-color: red;
  margin: 12px;
}

.test {
  position: absolute;
  width: calc(100% + 10px);
  height: calc(100% + 10px);
  top: -5px;
  left: -5px;
  z-index: -1;
  border-radius: 12px;
}

<div class="text">
  Просто текст
  <div class="test"></div>
</div>

БЛОГ НА HUSL

Как реализовать заполнение обводки по кругу в соответствии прогрессу?

Ответы (1 шт):