Как сделать уменьшающуюся линию border?

#javascript #css #svg

Как реализовать этот жёлтый бордер, чтобы при уменьшении кол-ва часов уменьшалась
длинна жёлтой полоски?
    

Ответы

Ответ 1

Решение SVG+JS

Суть такая, я думаю реализовать сможете.



let circle = document.querySelector('circle');
let radius = circle.r.baseVal.value;
let circumference = radius * 2 * Math.PI;

circle.style.strokeDasharray = `${circumference} ${circumference}`;
circle.style.strokeDashoffset = `${circumference}`;

function setProgress(percent) {
  const offset = circumference - percent / 100 * circumference;
  circle.style.strokeDashoffset = offset;
}

const input = document.querySelector('input');
setProgress(input.value);

input.addEventListener('change', function(e) {
  if (input.value < 101 && input.value > -1) {
    setProgress(input.value);
  }  
})
html,
body {
  background-color: #2962FF;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  position: relative;
}
.progress-ring__circle {
  transition: 0.35s stroke-dashoffset;
  -webkit-transform: rotate(-90deg);
          transform: rotate(-90deg);
  -webkit-transform-origin: 50% 50%;
          transform-origin: 50% 50%;
}
input {
  position: fixed;
  top: 10px;
  left: 10px;
  width: 80px;
}







Второй вариант без SVG

Codepen