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 you have read our privacy policy.

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