开发文档
CSS笔记

纯css实现Loading加载效果

Loading汇总，很多...

L ading

Load ng

# loading-demo-1

<html>
<div class="loading-1"></div>

</html>

<style>
    .loading-1 {
        width: 30px;
        height: 30px;
        border: 2px solid #000;
        border-top-color: transparent;
        border-radius: 100%;
        animation: circle infinite 0.75s linear;
    }

    @keyframes circle {
        0% {
            transform: rotate(0);
        }

        100% {
            transform: rotate(360deg);
        }
    }
</style>

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

# loading-demo-2

<html>
<div class="loading-2"></div>

</html>

<style>
    .loading-2 {
        position: relative;
        width: 30px;
        height: 30px;
        border: 2px solid #000;
        border-top-color: rgba(0, 0, 0, 0.2);
        border-right-color: rgba(0, 0, 0, 0.2);
        border-bottom-color: rgba(0, 0, 0, 0.2);
        border-radius: 100%;
        animation: circle infinite 0.75s linear;
    }

    @keyframes circle {
        0% {
            transform: rotate(0);
        }

        100% {
            transform: rotate(360deg);
        }
    }
</style>

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

# loading-demo-3

<html>
<div class="loading-3"></div>

</html>

<style>
    .loading-3 {
        position: relative;
        width: 30px;
        height: 30px;
        border: 2px solid #000;
        border-top-color: transparent;
        border-bottom-color: transparent;
        border-radius: 100%;

        animation: arrow-circle infinite 0.75s linear;
    }

    .loading-3:before,
    .loading-3:after {
        position: absolute;
        top: 24px;
        left: -2px;
        border-top: 5px solid #000;
        border-right: 5px solid transparent;
        border-left: 5px solid transparent;
        content: "";
        transform: rotate(-30deg);
    }

    .loading-3:after {
        top: 0;
        left: 20.5px;

        transform: rotate(150deg);
    }

    @keyframes arrow-circle {
        0% {
            transform: rotate(360deg);
        }

        100% {
            transform: rotate(0);
        }
    }
</style>

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

# loading-demo-4

<html>
<div class="loading-4"></div>

</html>

<style>
    .loading-4 {
        width: 50px;
        height: 50px;
        border-radius: 100%;
        background-color: #000;
        animation: ball-scale infinite linear 0.75s;
    }

    @keyframes ball-scale {
        0% {
            transform: scale(0.1);
            opacity: 1;
        }

        100% {
            transform: scale(1);
            opacity: 0;
        }
    }
</style>

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

# loading-demo-5

<html>
<div class="loading-5"></div>

</html>

<style>
    .loading-5 {
        position: relative;
        width: 40px;
        height: 40px;
    }

    .loading-5:before,
    .loading-5:after {
        position: absolute;
        width: 10px;
        height: 10px;
        content: "";
        border-radius: 100%;
        background-color: #000;
    }

    .loading-5:before {
        transform: translate(0, 0);
        animation: ball-circle-before infinite 1.5s linear;
    }

    .loading-5:after {
        transform: translate(30px, 30px);
        animation: ball-circle-after infinite 1.5s linear;
    }

    @keyframes ball-circle-after {
        0% {
            transform: translate(30px, 30px);
        }

        25% {
            transform: translate(0, 30px);
        }

        50% {
            transform: translate(0, 0);
        }

        75% {
            transform: translate(30px, 0);
        }

        100% {
            transform: translate(30px, 30px);
        }
    }

    @keyframes ball-circle-before {
        0% {
            transform: translate(0, 0);
        }

        25% {
            transform: translate(30px, 0);
        }

        50% {
            transform: translate(30px, 30px);
        }

        75% {
            transform: translate(0, 30px);
        }

        100% {
            transform: translate(0, 0);
        }
    }
</style>

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

# loading-demo-6

<html>
<div class="loading-6"></div>

</html>

<style>
    .loading-6 {
        display: block;
        position: relative;
        width: 6px;
        height: 10px;

        animation: rectangle infinite 1s ease-in-out -0.2s;

        background-color: #000;
    }

    .loading-6:before,
    .loading-6:after {
        position: absolute;
        width: 6px;
        height: 10px;
        content: "";
        background-color: #000;
    }

    .loading-6:before {
        left: -14px;

        animation: rectangle infinite 1s ease-in-out -0.4s;
    }

    .loading-6:after {
        right: -14px;

        animation: rectangle infinite 1s ease-in-out;
    }

    @keyframes rectangle {

        0%,
        80%,
        100% {
            height: 20px;
            box-shadow: 0 0 #000;
        }

        40% {
            height: 30px;
            box-shadow: 0 -20px #000;
        }
    }
</style>

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

# loading-demo-7

<html>
<div class="loading-7"></div>

</html>

<style>
    .loading-7 {
        position: relative;
        width: 60px;
        height: 60px;
        animation: heart infinite 0.85s linear;
    }

    .loading-7:before,
    .loading-7:after {
        position: absolute;
        top: 0;
        left: 30px;
        width: 30px;
        height: 50px;
        content: "";
        transform: rotate(-45deg);
        transform-origin: 0 100%;
        border-radius: 30px 30px 0 0;
        background: #000;
    }

    .loading-7:after {
        left: 0;
        transform: rotate(45deg);
        transform-origin: 100% 100%;
    }

    @keyframes heart {
        0% {
            transform: scale(0.8);
        }

        50% {
            transform: scale(1);
        }

        100% {
            transform: scale(0.8);
        }
    }
</style>

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

# loading-demo-8

<html>
<div class="loading-8"></div>

</html>

<style>
    .loading-8 {
        margin: 20px;
        position: relative;
        width: 15px;
        height: 15px;
        border-radius: 100%;
        background-color: #000;

        animation: ball-rotate 1s 0s cubic-bezier(0.7, -0.13, 0.22, 0.86) infinite;
        animation-fill-mode: both;
    }

    .loading-8:before,
    .loading-8:after {
        position: absolute;
        width: 15px;
        height: 15px;
        margin: 2px;
        content: "";
        opacity: 0.8;
        border-radius: 100%;
        background-color: #000;
    }

    .loading-8:before {
        top: 0;
        left: -28px;
    }

    .loading-8:after {
        top: 0;
        left: 25px;
    }

    @keyframes ball-rotate {
        0% {
            transform: rotate(0deg) scale(1);
        }

        50% {
            transform: rotate(180deg) scale(0.6);
        }

        100% {
            transform: rotate(360deg) scale(1);
        }
    }
</style>

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

# loading-demo-9

<html>
<div class="loading-9"></div>

</html>

<style>
    .loading-9 {
        margin: 20px;
        position: relative;
        width: 1px;
        height: 1px;
    }

    .loading-9:before,
    .loading-9:after {
        position: absolute;
        display: inline-block;
        width: 15px;
        height: 15px;
        content: "";
        border-radius: 100%;
        background-color: #000;
    }

    .loading-9:before {
        left: -15px;
        animation: ball-pulse infinite 0.75s -0.4s cubic-bezier(0.2, 0.68, 0.18, 1.08);
    }

    .loading-9:after {
        right: -15px;
        animation: ball-pulse infinite 0.75s cubic-bezier(0.2, 0.68, 0.18, 1.08);
    }

    @keyframes ball-pulse {
        0% {
            transform: scale(1);
            opacity: 1;
        }

        50% {
            transform: scale(0.1);
            opacity: 0.6;
        }

        100% {
            transform: scale(1);
            opacity: 1;
        }
    }
</style>

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

# loading-demo-10

<html>
<div class="loading-10"></div>

</html>

<style>
    .loading-10 {
        position: relative;
        width: 50px;
        perspective: 200px;
    }

    .loading-10:before,
    .loading-10:after {
        position: absolute;
        width: 20px;
        height: 20px;
        content: "";
        animation: jumping 0.5s infinite alternate;
        background: rgba(0, 0, 0, 0);
    }

    .loading-10:before {
        left: 0;
    }

    .loading-10:after {
        right: 0;
        animation-delay: 0.15s;
    }

    @keyframes jumping {
        0% {
            transform: scale(1) translateY(0px) rotateX(0deg);
            box-shadow: 0 0 0 rgba(0, 0, 0, 0);
        }

        100% {
            transform: scale(1.2) translateY(-25px) rotateX(45deg);
            background: #000;
            box-shadow: 0 25px 40px #000;
        }
    }
</style>

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

# loading-demo-11

<html>
<div id="loading-11">
    <div class="sk-chase">
        <div class="sk-chase-dot"></div>
        <div class="sk-chase-dot"></div>
        <div class="sk-chase-dot"></div>
        <div class="sk-chase-dot"></div>
        <div class="sk-chase-dot"></div>
        <div class="sk-chase-dot"></div>
    </div>
    <div>加载资源中...</div>
</div>

</html>

<style>
    #loading-11 {
        padding: 10px;
        color: #409EFF;
        font-size: 15px;
        overflow: hidden;
    }

    @keyframes zoomOut {
        0% {
            opacity: 1
        }

        50% {
            opacity: 0;
            transform: scale3d(1.3, 1.3, 1.3)
        }

        to {
            opacity: 0
        }
    }

    #loading-11.out {
        animation: zoomOut 0.5s linear forwards;
        pointer-events: none;
    }

    #loading-11.out .sk-chase-dot,
    #loading-11.out .sk-chase {
        animation: null;
    }

    .sk-chase {
        margin-bottom: 20px;
        width: 40px;
        height: 40px;
        position: relative;
        animation: sk-chase 2.5s infinite linear both;
    }

    .sk-chase-dot {
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        animation: sk-chase-dot 2s infinite ease-in-out both;
    }

    .sk-chase-dot::before {
        content: '';
        display: block;
        width: 20%;
        height: 20%;
        background-color: #409EFF;
        border-radius: 100%;
        animation: sk-chase-dot-before 2s infinite ease-in-out both;
    }

    .sk-chase-dot:nth-child(1) {
        animation-delay: -1.1s;
    }

    .sk-chase-dot:nth-child(2) {
        animation-delay: -1s;
    }

    .sk-chase-dot:nth-child(3) {
        animation-delay: -0.9s;
    }

    .sk-chase-dot:nth-child(4) {
        animation-delay: -0.8s;
    }

    .sk-chase-dot:nth-child(5) {
        animation-delay: -0.7s;
    }

    .sk-chase-dot:nth-child(6) {
        animation-delay: -0.6s;
    }

    .sk-chase-dot:nth-child(1):before {
        animation-delay: -1.1s;
    }

    .sk-chase-dot:nth-child(2):before {
        animation-delay: -1s;
    }

    .sk-chase-dot:nth-child(3):before {
        animation-delay: -0.9s;
    }

    .sk-chase-dot:nth-child(4):before {
        animation-delay: -0.8s;
    }

    .sk-chase-dot:nth-child(5):before {
        animation-delay: -0.7s;
    }

    .sk-chase-dot:nth-child(6):before {
        animation-delay: -0.6s;
    }

    .sk-chase-dot .sk-chase-dot:nth-child(2) {
        animation-delay: -1s;
    }

    .sk-chase-dot:nth-child(3) {
        animation-delay: -0.9s;
    }

    .sk-chase-dot:nth-child(4) {
        animation-delay: -0.8s;
    }

    .sk-chase-dot:nth-child(5) {
        animation-delay: -0.7s;
    }

    .sk-chase-dot:nth-child(6) {
        animation-delay: -0.6s;
    }

    .sk-chase-dot:nth-child(1):before {
        animation-delay: -1.1s;
    }

    .sk-chase-dot:nth-child(2):before {
        animation-delay: -1s;
    }

    .sk-chase-dot:nth-child(3):before {
        animation-delay: -0.9s;
    }

    .sk-chase-dot:nth-child(4):before {
        animation-delay: -0.8s;
    }

    .sk-chase-dot:nth-child(5):before {
        animation-delay: -0.7s;
    }

    .sk-chase-dot:nth-child(6):before {
        animation-delay: -0.6s;
    }

    @keyframes sk-chase {
        100% {
            transform: rotate(360deg);
        }
    }

    @keyframes sk-chase-dot {

        80%,
        100% {
            transform: rotate(360deg);
        }
    }

    @keyframes sk-chase-dot-before {
        50% {
            transform: scale(0.4);
        }

        100%,
        0% {
            transform: scale(1);
        }
    }
</style>

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
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192

#HTML #CSS

上次更新: 2024/01/30, 00:35:17

滚动条样式设置(CSS)

CSS实现左侧固定，右侧自适应方法

← 滚动条样式设置(CSS) CSS实现左侧固定，右侧自适应方法→