От автора: такие измерения как время, проценты и величина угла наилучшим образом можно представить визуально, зачастую в виде дуги или круга. В HTML5 нет встроенных круговых элементов управления, но это не должно останавливать вас, ведь вы можете создать их самостоятельно. В этом примере я покажу, как создать интерактивный элемент интерфейса, который будет выступать в роли таймера или в виде круга с процентами.
Нужный нам элемент это input типа range:
1 |
<input type="range" min="0" max="100" value="15" id="utilslider"> |
…и SVG элемент, на который выводятся данные. Мы взяли этот пример у Lea Verou из ее статьи CSS Secrets:
1 2 3 4 5 |
<div id="readout"> <svg viewBox="0 0 100 100"> <circle r="25" cx="50" cy="50" id="pie" /> </svg> </div> |
(С помощью div позиционируются все элементы, в том числе и SVG. CodePen демо).
Стилизуем круг
Периметр SVG круга равен 2πr, т.е. 2 × 3.14 × 25 или приблизительно 158. Зная это, из SVG можно сделать круг с помощью border-radius. Обводку сделать можно с помощью свойства stroke, а с помощью свойства stroke- dasharray мы будем показывать только ее часть:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
#readout { position: relative; } svg { transform: rotate(-90deg); color: #333; background: currentcolor; border-radius: 50%; width: 100%; } #pie { fill: currentcolor; stroke: hsl(0,0%,50%); stroke-width: 50; stroke-dasharray: 55 158; } |
Обратите внимание, что для объявления SVG и элемента circle с помощью CSS переменной я использовал currentcolor. Свойство stroke-width – диаметр круга: все обводки в SVG 1.1 проходят точно через центр элемента path. Свойство border-radius «обрезает» внешний край обводки, а вращение делает так, что обводка превращается в сектор круга.
Задаем значение
Для отображения действий пользователя в виде счетчика мы добавим элементы label и output. Наша разметка станет такой:
1 2 3 4 5 6 7 8 |
<label for="utilslider">Task CPU Utilization</label> <div id="readout"> <svg viewBox="0 0 100 100"> <circle r="25" cx="50" cy="50" id="pie" /> </svg> <output for="utilslider">15%</output> </div> <input type="range" min="0" max="100" value="15" id="utilslider"> |
Стили к этим элементам я не стал включать в статью, посмотреть их можно в демо CodePen. А наше внимание мы обратим на код JavaScript в нижней части страницы. В первую очередь найдем ссылки на нужные нам объекты и переменные:
1 2 3 4 5 |
var utilslider = document.getElementById("utilslider"), circle = document.getElementById("pie"), radius = parseInt(circle.getAttribute('r'), 2), circumference = 2 * radius * Math.PI, percentDisplay = document.querySelector("#readout output"); |
Мы не будем прописывать статичные значения радиуса и длины окружности в JS. Мы будем считывать значение радиуса (переводить значение из текстового типа в число с плавающей точкой) и вычислять длину окружности по этому значению.
Обратите внимание: хотя SVG и адаптивен, длина окружности будет оставаться одной и той же и не будет зависеть от размера окна, так как радиус SVG не меняется.
Чтобы правильно вычислять сектор элемента circle с текущим значением utilsider, необходимо вызывать определенную функцию. С помощью этой же функции будет задаваться сектор круга от значения utilsider:
1 2 3 4 |
utilslider.addEventListener("input", function() { pieSlicer(); } ) pieSlicer(); |
Сама функция pieSlicer:
1 2 3 4 5 |
function pieSlicer() { var percentValue = (utilslider.value / 100) * circumference; pie.style.strokeDasharray = percentValue + " " + circumference; percentDisplay.innerHTML = utilslider.value + "%"; } |
Как менять цвета
По умолчанию цвет сектора круга всегда будет таким, какой был задан в CSS. Простейший способ менять его динамически это HSL. Красный будет задаваться так (0, 50%, 50%), насыщенность цвета задается средним значением. Если в нашей функции вместо насыщенности передавать значение utilslider:
1 |
pie.style.stroke = "hsl(0 ," + utilslider.value + "%, 50%)"; |
…цвет сектора будет меняться от черного до ярко красного с увеличением значения. Также можно менять цвет с увеличением значения, об этом я расскажу в следующей статье.
Tony Downey предложил использовать плавные переходы вместе с обводкой, тогда величина сектора будет изменяться по клику на элемент range моментально и не будет «перепрыгивать» на новое значение. CSS код:
1 2 3 |
#pie { transition:stroke-dasharray 2s; } |
Также сектор подхватывает любые изменения с utilslider. Это всего лишь визуальное представление числа в форме круга. В следующий раз я рассмотрю элементы интерфейса, более подходящие для такой интеграции.
Источник: //thenewcode.com/
Редакция: Команда webformyself.