Делаем анимацию загрузки с помощью SVG, CSS и JavaScript
Делаем анимацию загрузки с помощью SVG, CSS и JavaScript
Доброго времени суток! В данном примере мы посмотрим как сделатиь анимацию загрузки, используя SVG, CSS и JavaScript.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ProgerssBar</title>
<style>
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;
transform: rotate(-90deg);
transform-origin: 50% 50%;
}
input {
position: fixed;
top: 10px;
left: 10px;
width: 80px;
}
</style>
</head>
<body>
<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">
Загрузка...
</circle>
</svg>
<script>
var circle = document.querySelector('circle');
var radius = circle.r.baseVal.value;
var 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;
}
let value = 0
requestAnimationFrame(function animate() {
value += 0.01;
if (value < 101 && value > -1) {
setProgress(value);
}
if(value < 101) requestAnimationFrame(animate)
})
</script>
</body>
</html>
