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

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




Источник

НЕТ КОММЕНТАРИЕВ

Оставить комментарий