5

введите сюда описание изображения

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

1

1 ответ 1

10

Решение 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
   class="progress-ring"
   width="120"
   height="120">
  <circle
    class="progress-ring__circle"
    stroke="white"
    stroke-width="4"
    fill="transparent"
    r="52"
    cx="60"
    cy="60"/>
</svg>

<input
  value="35"
  type="number"
  step="5"
  min="0"
  max="100"
  placeholder="progress"
>

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

Codepen

9
  • Теперь под каждым ответом буду спрашивать: "Точно твой код?))"
    – Arthur
    9 авг 2018 в 18:26
  • @Избыток сусликов код действительно хороший (+) 9 авг 2018 в 18:29
  • 1
    @Избытоксусликов, ну прости, подумаешь второй раз)))
    – Arthur
    9 авг 2018 в 18:37
  • 1
    @Arthur тебе все можно ;)
    – Randall
    9 авг 2018 в 18:38
  • 1
    @Alexandr_TT постараюсь
    – Randall
    9 авг 2018 в 18:48

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.