Для чего нужен, и влияет ли на поведение элементов на сайте?
2
-
3Для использования вами в любых целях. Не влияет, если вы их никак не используете.– andreymal17 янв 2020 в 17:35
-
Очень хорошей практикой в разработке веб-приложения считается хранение всех данных в DOM. Если вы будете разбрасывать их по переменным в коде, то структура данных может легко превратится в вермишель.– Beast Winterwolf18 янв 2020 в 6:07
Добавить комментарий
|
1 ответ
При данной анимации я использовал data-атрибуты, чтобы задать значение, до которого будет заполняться круг. Можете заметить, что у каждого второго circle
есть data-атрибут data-circle
. В js я получаю эти числа и работаю с ними
function start() {
let reqAnimFrame = (function() {
return requestAnimationFrame ||
mozRequestAnimationFrame ||
webkitRequestAnimationFrame ||
oRequestAnimationFrame ||
msRequestAnimationFrame ||
function(callback) {
setTimeout(callback, 1000 / 60);
}
})();
let dataCircle = document.querySelectorAll('.progressbar__thumb');
function setProgress(percent, selector) {
let circle = selector.querySelector('.progressbar__thumb');
let total = Math.PI * circle.r.baseVal.value;
circle.style.strokeDasharray = `${total*percent/100} ${total*(1-percent/100)*2}`;
selector.querySelector('text').innerHTML = '<tspan>' + percent.toFixed(0) + '</tspan>%';
}
function circle(final, i) {
let number = -1;
i++;
let selector = '.progress__container:nth-child(' + i + ')';
let mainSelector = document.querySelector(selector);
let myReq = null;
function circleStep() {
myReq = reqAnimFrame(circleStep);
setProgress(number, mainSelector);
if (number >= final) {
cancelAnimationFrame(myReq);
}
number++;
}
circleStep();
}
for (let i = 0; i < dataCircle.length; i++) {
let num = dataCircle[i].getAttribute('data-circle');
circle(num, i);
}
}
document.addEventListener('DOMContentLoaded', () => {
start();
});
@import url('https://fonts.googleapis.com/css?family=Open+Sans&display=swap');
*, *:before, *:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body {
margin: 0;
color: black;
font-size: 16px;
font-family: 'Open Sans', sans-serif;
}
.cards__progress__bar {
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;
-webkit-flex-wrap: wrap;
-moz-flex-wrap: wrap;
-ms-flex-wrap: wrap;
-o-flex-wrap: wrap;
flex-wrap: wrap;
justify-content: space-around;
max-width: 1000px;
margin: 0 auto;
}
.progress__container {
width: 150px;
height: 150px;
margin-bottom: 50px;
}
.progressbar__track {
fill: transparent;
stroke: #ededed;
stroke-width: 2px;
}
.progressbar__thumb {
fill: transparent;
stroke: #ff0036;
stroke-width: 2px;
transform-origin: center;
stroke-dasharray: 0 1;
transform: rotate(180deg);
}
.progressbar text {
font-family: 'Lato', sans-serif;
font-weight: 400;
}
.progressbar text tspan {
fill: #ff0036;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="cards__progress__bar">
<div class="progress__container">
<svg class="progressbar" viewbox="0 0 64 64">
<circle class="progressbar__track" cx="50%" cy="50%" r="30"></circle>
<circle class="progressbar__thumb" data-circle="100" cx="50%" cy="50%" r="30"></circle>
<text x=32 y=33 text-anchor=middle dominant-baseline=middle></text>
</svg>
</div> <!-- .progress__container -->
<div class="progress__container">
<svg class="progressbar" viewbox="0 0 64 64">
<circle class="progressbar__track" cx="50%" cy="50%" r="30"></circle>
<circle class="progressbar__thumb" data-circle="90" cx="50%" cy="50%" r="30"></circle>
<text x=32 y=33 text-anchor=middle dominant-baseline=middle></text>
</svg>
</div> <!-- .progress__container -->
<div class="progress__container">
<svg class="progressbar" viewbox="0 0 64 64">
<circle class="progressbar__track" cx="50%" cy="50%" r="30"></circle>
<circle class="progressbar__thumb" data-circle="80" cx="50%" cy="50%" r="30"></circle>
<text x=32 y=33 text-anchor=middle dominant-baseline=middle></text>
</svg>
</div> <!-- .progress__container -->
<div class="progress__container">
<svg class="progressbar" viewbox="0 0 64 64">
<circle class="progressbar__track" cx="50%" cy="50%" r="30"></circle>
<circle class="progressbar__thumb" data-circle="70" cx="50%" cy="50%" r="30"></circle>
<text x=32 y=33 text-anchor=middle dominant-baseline=middle></text>
</svg>
</div> <!-- .progress__container -->
</div> <!-- .cards__progress__bar -->
<script src="script.js"></script>
</body>
</html>