014-snake-loading/snake loading.html at main · JIEJOE-WEB-Tutorial/014-snake-loading · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>snake loading</title>
    <script src="gsap.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            font-size: 1vmin;
        }

        body {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100%;
            height: 100dvh;
            background-color: #171717;
        }

        .loading {
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .loading_icon {
            position: absolute;
            width: 35rem;
        }

        .loading_icon path {
            fill: none;
            stroke: #17f700;
            stroke-linecap: round;

        }

        .loading_icon path:nth-child(1) {
            stroke-width: 2;
            stroke-dasharray: 0 5 0 5 0 5 0 5 0 500;
        }

        .loading_icon path:nth-child(2) {
            stroke-width: 4;
            stroke-dasharray: 0 500 0 500;
            stroke-dashoffset: 480;
        }

        .loading_circle {
            position: absolute;
            width: 15rem;
            height: 15rem;
            border-radius: 100%;
            background-color: #17f700;
            opacity: 0;
        }
    </style>
</head>

<body>
    <div class="loading">
        <svg viewBox="0 0 100 50" class="loading_icon">
            <path d="M50,25c0-12.14,9.84-21.99,21.99-21.99S93.98,12.86,93.98,25s-9.84,21.99-21.99,21.99S50,37.21,50,25.06
        S40.16,3.01,28.01,3.01S6.02,12.86,6.02,25s9.84,21.99,21.99,21.99S50,37.14,50,25c0-8.14,4.42-15.24,10.99-19.05
        C67.57,9.76,71.99,16.86,71.99,25c0,8.14-4.42,15.24-10.99,19.04c0,0,0,0,0,0c-3.23,1.87-6.99,2.94-10.99,2.94
        c-4.01,0-7.76-1.07-10.99-2.94h0C32.43,40.24,28.01,33.14,28.01,25c0-8.14,4.42-15.24,10.99-19.05l0,0
        C42.24,4.08,45.99,3.01,50,3.01s7.76,1.07,10.99,2.94l0,0" />
            <path d="M50,25c0-12.14,9.84-21.99,21.99-21.99S93.98,12.86,93.98,25s-9.84,21.99-21.99,21.99S50,37.21,50,25.06
        S40.16,3.01,28.01,3.01S6.02,12.86,6.02,25s9.84,21.99,21.99,21.99S50,37.14,50,25c0-8.14,4.42-15.24,10.99-19.05
        C67.57,9.76,71.99,16.86,71.99,25c0,8.14-4.42,15.24-10.99,19.04c0,0,0,0,0,0c-3.23,1.87-6.99,2.94-10.99,2.94
        c-4.01,0-7.76-1.07-10.99-2.94h0C32.43,40.24,28.01,33.14,28.01,25c0-8.14,4.42-15.24,10.99-19.05l0,0
        C42.24,4.08,45.99,3.01,50,3.01s7.76,1.07,10.99,2.94l0,0" />
        </svg>
        <div class="loading_circle"></div>
    </div>
</body>
<script>
    // JIEJOE produce
    // b站主页：https://space.bilibili.com/3546390319860710
    const loading = {
        paths: [...document.querySelectorAll(".loading_icon path")],
        circle: document.querySelector(".loading_circle"),
        animater: null,
        init() {
            let index = 0;
            this.animater = gsap.timeline().fromTo(
                this.paths,
                {
                    strokeDashoffset: (i) => {
                        if (i === 0) return 0;
                        else return 480;
                    }
                },
                {
                    strokeDashoffset: (i) => {
                        if (i === 0) return -275;
                        else return 205;
                    },
                    duration: 2,
                    ease: "linear",
                    onComplete: () => {
                        index++;
                        if (index >= 2) this.finish();
                        else this.animater.restart();
                    }
                }
            );
        },
        finish() {
            this.animater = gsap.timeline()
                .to(this.paths[1], {
                    strokeWidth: 0,
                    duration: 0.4,
                    ease: "power3.out",
                })
                .to(this.paths[0], {
                    strokeDasharray: '150 0 0 0 0 0 0 0 0 500',
                    strokeDashoffset: -300,
                    duration: 0.7,
                    ease: "power3.out",
                }, "<")
                .to(this.circle, {
                    opacity: 1,
                    duration: 0.7,
                    ease: "power3.out",
                }, "<0.3")
        }
    };
    window.onload = loading.init();
</script>

</html>