Делаем анимацию загрузки с помощью SVG, CSS и JavaScript

Делаем анимацию загрузки с помощью 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>


Источник

Статьи по теме

Добавить комментарий

Ваш адрес email не будет опубликован.

Этот сайт использует Akismet для борьбы со спамом. Узнайте, как обрабатываются ваши данные комментариев.

Проверьте также
Close
Back to top button