CSS Loading

[CSS] Loading css

CSS-Loading

Posted by cl9000 on March 27, 2017

基于CSS绘制的Loading，使用CSS的动画效果。

loading001

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
<!-- loading-001 html -->
<div id="loader-wrapper">
    <div id="loader"></div>
    <div class="loader-section section-left"></div>
    <div class="loader-section section-right"></div>
</div>

<!-- loading-001 CSS -->
<style>
    @keyframes spin {
        0% {
            -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
        }
        100% {
            -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
        }
    }
    #loader-wrapper .loader-section {
        position: fixed;
        top: 0;
        width: 51%;
        height: 100%;
        background: #222222;
        z-index: 2000;
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
    #loader-wrapper .loader-section.section-left {
        left: 0;
    }
    #loader-wrapper .loader-section.section-right {
        right: 0;
    }
    #loader {
        display: block;
        position: relative;
        left: 50%;
        top: 50%;
        width: 150px;
        height: 150px;
        margin: -75px 0 0 -75px;
        border-radius: 50%;
        border: 3px solid transparent;
        border-top-color: #3498db;
        -webkit-animation: spin 2s linear infinite;
        animation: spin 2s linear infinite;
        z-index: 2001;
    }
    #loader::before {
        content: "";
        position: absolute;
        top: 5px;
        left: 5px;
        right: 5px;
        bottom: 5px;
        border-radius: 50%;
        border: 3px solid transparent;
        border-top-color: #e74c3c;
        -webkit-animation: spin 3s linear infinite;
        animation: spin 3s linear infinite;
    }
    #loader::after {
        content: "";
        position: absolute;
        top: 15px;
        left: 15px;
        right: 15px;
        bottom: 15px;
        border-radius: 50%;
        border: 3px solid transparent;
        border-top-color: #f9c922;
        -webkit-animation: spin 1.5s linear infinite;
        animation: spin 1.5s linear infinite;
    }
</style>

loading002

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
<!-- loading-002 html -->
<div class="loading">
    <div class="circle-one"></div>
    <div class="circle-two"></div>
</div>

<!-- loading-002 -->
<style>
    @keyframes spinPulse {
        0% {
            -webkit-transform: rotate(160deg);
            opacity: 0;
            box-shadow: 0 0 1px #505050;
        }
        50% {
            -webkit-transform: rotate(145deg);
            opacity: 1;
        }
        100% {
            -webkit-transform: rotate(-320deg);
            opacity: 0;
        }
    }
    @keyframes spinoffPulse {
        0% {
            -webkit-transform: rotate(0deg);
        }
        100% {
            -webkit-transform: rotate(360deg);
        }
    }
    .loading {
        position: fixed;
        width: 100%;
        height: 100%;
        top: 50%;
        left: 50%;
        z-index: 99;
        transform: translateX(-50%);
    }
    .loading::before {
        content: ' ';
        position: fixed;
        top: -50%;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(74, 74, 74, 0.16);
    }
    .loading .circle-one {
        background-color: rgba(0, 0, 0, 0);
        border: 5px solid rgba(0, 183, 229, 0.9);
        opacity: .9;
        border-right: 5px solid rgba(0, 0, 0, 0);
        border-left: 5px solid rgba(0, 0, 0, 0);
        border-radius: 50px;
        box-shadow: 0 0 35px #2187e7;
        width: 50px;
        height: 50px;
        margin: 0 auto;
        animation: spinPulse 1s infinite linear;
        -moz-animation: spinPulse 1s infinite ease-in-out;
        -webkit-animation: spinPulse 1s infinite linear;
    }
    .loading .circle-two {
        background-color: rgba(0, 0, 0, 0);
        border: 5px solid rgba(0, 183, 229, 0.9);
        opacity: .9;
        border-left: 5px solid rgba(0, 0, 0, 0);
        border-right: 5px solid rgba(0, 0, 0, 0);
        border-radius: 50px;
        box-shadow: 0 0 15px #2187e7;
        width: 30px;
        height: 30px;
        margin: 0 auto;
        position: relative;
        top: -40px;
        animation: spinoffPulse 1s infinite linear;
        -moz-animation: spinoffPulse 1s infinite linear;
        -webkit-animation: spinoffPulse 1s infinite linear;
    }
</style>

loading003 - 极简插件

极简插件

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
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
<!-- loading003 - html -->
    <div id="preloader-body" style="">
      <div id="cube-wrapper" style="">
        <div class="cube-folding"><span class="leaf1"></span><span class="leaf2"></span><span class="leaf3"></span><span
            class="leaf4"></span></div><span class="loading" data-name="Loading">Loading</span>
      </div>
    </div>

<!-- loading003 - CSS -->
<style>
    #preloader-body {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: #fff;
      z-index: 9999;
  
    }
  
    .cube-folding {
      width: 50px;
      height: 50px;
      display: inline-block;
      -moz-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
      -webkit-transform: rotate(45deg);
      transform: rotate(45deg);
      font-size: 0;
    }
  
    .cube-folding span {
      position: relative;
      width: 25px;
      height: 25px;
      -moz-transform: scale(1.1);
      -ms-transform: scale(1.1);
      -webkit-transform: scale(1.1);
      transform: scale(1.1);
      display: inline-block;
    }
  
    .cube-folding span::before {
      content: '';
      background-color: #007ee5;
      position: absolute;
      left: 0;
      top: 0;
      display: block;
      width: 25px;
      height: 25px;
      -moz-transform-origin: 100% 100%;
      -ms-transform-origin: 100% 100%;
      -webkit-transform-origin: 100% 100%;
      transform-origin: 100% 100%;
      -moz-animation: folding 2.5s infinite linear both;
      -webkit-animation: folding 2.5s infinite linear both;
      animation: folding 2.5s infinite linear both;
    }
  
    .cube-folding .leaf2 {
      -moz-transform: rotateZ(90deg) scale(1.1);
      -ms-transform: rotateZ(90deg) scale(1.1);
      -webkit-transform: rotateZ(90deg) scale(1.1);
      transform: rotateZ(90deg) scale(1.1);
    }
  
    .cube-folding .leaf2::before {
      -moz-animation-delay: 0.3s;
      -webkit-animation-delay: 0.3s;
      animation-delay: 0.3s;
      background-color: #34a4ff;
    }
  
    .cube-folding .leaf3 {
      -moz-transform: rotateZ(270deg) scale(1.1);
      -ms-transform: rotateZ(270deg) scale(1.1);
      -webkit-transform: rotateZ(270deg) scale(1.1);
      transform: rotateZ(270deg) scale(1.1);
    }
  
    .cube-folding .leaf3::before {
      -moz-animation-delay: 0.9s;
      -webkit-animation-delay: 0.9s;
      animation-delay: 0.9s;
      background-color: #83c7ff;
    }
  
    .cube-folding .leaf4 {
      -moz-transform: rotateZ(180deg) scale(1.1);
      -ms-transform: rotateZ(180deg) scale(1.1);
      -webkit-transform: rotateZ(180deg) scale(1.1);
      transform: rotateZ(180deg) scale(1.1);
    }
  
    .cube-folding .leaf4::before {
      -moz-animation-delay: 0.6s;
      -webkit-animation-delay: 0.6s;
      animation-delay: 0.6s;
      background-color: #5cb6ff;
    }
  
    @-moz-keyframes folding {
  
      0%,
      10% {
        -moz-transform: perspective(140px) rotateX(-180deg);
        transform: perspective(140px) rotateX(-180deg);
        opacity: 0;
      }
  
      25%,
      75% {
        -moz-transform: perspective(140px) rotateX(0deg);
        transform: perspective(140px) rotateX(0deg);
        opacity: 1;
      }
  
      90%,
      100% {
        -moz-transform: perspective(140px) rotateY(180deg);
        transform: perspective(140px) rotateY(180deg);
        opacity: 0;
      }
    }
  
    @-webkit-keyframes folding {
  
      0%,
      10% {
        -webkit-transform: perspective(140px) rotateX(-180deg);
        transform: perspective(140px) rotateX(-180deg);
        opacity: 0;
      }
  
      25%,
      75% {
        -webkit-transform: perspective(140px) rotateX(0deg);
        transform: perspective(140px) rotateX(0deg);
        opacity: 1;
      }
  
      90%,
      100% {
        -webkit-transform: perspective(140px) rotateY(180deg);
        transform: perspective(140px) rotateY(180deg);
        opacity: 0;
      }
    }
  
    @keyframes folding {
  
      0%,
      10% {
        -moz-transform: perspective(140px) rotateX(-180deg);
        -ms-transform: perspective(140px) rotateX(-180deg);
        -webkit-transform: perspective(140px) rotateX(-180deg);
        transform: perspective(140px) rotateX(-180deg);
        opacity: 0;
      }
  
      25%,
      75% {
        -moz-transform: perspective(140px) rotateX(0deg);
        -ms-transform: perspective(140px) rotateX(0deg);
        -webkit-transform: perspective(140px) rotateX(0deg);
        transform: perspective(140px) rotateX(0deg);
        opacity: 1;
      }
  
      90%,
      100% {
        -moz-transform: perspective(140px) rotateY(180deg);
        -ms-transform: perspective(140px) rotateY(180deg);
        -webkit-transform: perspective(140px) rotateY(180deg);
        transform: perspective(140px) rotateY(180deg);
        opacity: 0;
      }
    }
  
    #cube-wrapper {
      position: fixed;
      left: 50%;
      top: 50%;
      margin-top: -50px;
      margin-left: -50px;
      width: 100px;
      height: 100px;
      text-align: center;
    }
  
    #cube-wrapper:after {
      content: '';
      position: absolute;
      left: 0;
      right: 0;
      bottom: -20px;
      margin: auto;
      width: 90px;
      height: 6px;
      background-color: rgba(0, 0, 0, 0.1);
      -webkit-filter: blur(2px);
      filter: blur(2px);
      -moz-border-radius: 100%;
      -webkit-border-radius: 100%;
      border-radius: 100%;
      z-index: 1;
      -moz-animation: shadow 0.5s ease infinite alternate;
      -webkit-animation: shadow 0.5s ease infinite alternate;
      animation: shadow 0.5s ease infinite alternate;
    }
  
    #cube-wrapper .loading {
      font-size: 12px;
      letter-spacing: 0.1em;
      display: block;
      color: #007ee5;
      position: relative;
      top: 25px;
      z-index: 2;
      -moz-animation: text 0.5s ease infinite alternate;
      -webkit-animation: text 0.5s ease infinite alternate;
      animation: text 0.5s ease infinite alternate;
    }
  </style>

loading004

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
<!-- loading004 - html -->
<div id="loading" style="display: block;">
    <div id="loading-center">
        <div id="loading-center-absolute">
            <div class="object" id="object_four"></div>
            <div class="object" id="object_three"></div>
            <div class="object" id="object_two"></div>
            <div class="object" id="object_one"></div>
        </div>
    </div>
</div>


<!-- loading004 - css -->
<style>
  #loading {
    background-color: rgba(0,0,0,0.8);
    height: 100%;
    width: 100%;
    position: fixed;
    z-index: 9999;
    margin-top: 0;
    top: 0;
}
#loading-center {
    width: 100%;
    height: 100%;
    position: relative;
}
#loading-center-absolute {
    position: absolute;
    left: 50%;
    top: 50%;
    height: 200px;
    width: 200px;
    margin-top: -100px;
    margin-left: -100px;
    -ms-transform: rotate(-135deg);
    -webkit-transform: rotate(-135deg);
    transform: rotate(-135deg);
}

.object {
    -moz-border-radius: 50% 50% 50% 50%;
    -webkit-border-radius: 50% 50% 50% 50%;
    border-radius: 50% 50% 50% 50%;
    position: absolute;
    border-top: 5px solid #FFF;
    border-bottom: 5px solid transparent;
    border-left: 5px solid #FFF;
    border-right: 5px solid transparent;
    -webkit-animation: animate 2s infinite;
    animation: animate 2s infinite;
}

#object_one {
    left: 75px;
    top: 75px;
    width: 50px;
    height: 50px;
}

#object_two {
    left: 65px;
    top: 65px;
    width: 70px;
    height: 70px;
    -webkit-animation-delay: 0.2s;
    animation-delay: 0.2s;
}

#object_three {
    left: 55px;
    top: 55px;
    width: 90px;
    height: 90px;
    -webkit-animation-delay: 0.4s;
    animation-delay: 0.4s;
}

#object_four {
    left: 45px;
    top: 45px;
    width: 110px;
    height: 110px;
    -webkit-animation-delay: 0.6s;
    animation-delay: 0.6s;
}

@-webkit-keyframes animate {
    50% {
        -ms-transform: rotate(360deg) scale(0.8);
        -webkit-transform: rotate(360deg) scale(0.8);
        transform: rotate(360deg) scale(0.8);
    }
}

@keyframes animate {
    50% {
        -ms-transform: rotate(360deg) scale(0.8);
        -webkit-transform: rotate(360deg) scale(0.8);
        transform: rotate(360deg) 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
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
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
<!-- 角落图标 - 鼠标经过提示 -->
<!-- html -->
<div id="suspension">
    <div class="livechat-girl animated" style="right: -35px; bottom: 75px;">
        <img class="girl" src="a.png" oncontextmenu="return false;" ondragstart="return false;" style="border-radius: 0;">
        <div class="livechat-hint rd-notice-tooltip rd-notice-type-success rd-notice-position-left single-line  show_hint">
            <div class="rd-notice-content">累计提供了 21318 次上传服务</div>
        </div>
        <div class="animated-circles animated">
            <div class="circle c-1"></div>
            <div class="circle c-2"></div>
            <div class="circle c-3"></div>
        </div>
    </div>
</div>

<style>
  .livechat-girl.animated {
    opacity: 1;
    transform: translateY(-40px);
    -webkit-transform: translateY(-40px);
    -ms-transform: translateY(-40px);
}
.animated {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}
.livechat-girl {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    position: fixed;
    bottom: 75px;
    right: -35px;
    opacity: 0;
    -webkit-box-shadow: 0 5px 10px 0 rgba(35,50,56,.3);
    box-shadow: 0 5px 10px 0 rgba(35,50,56,.3);
    z-index: 700;
    transform: translateY(0);
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    cursor: pointer;
    -webkit-transition: all 1s cubic-bezier(.86, 0, .07, 1);
    transition: all 1s cubic-bezier(.86, 0, .07, 1);
}
.animated {
    -webkit-animation-duration: .5s;
    animation-duration: .5s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

@keyframes scaleToggleOne {
    0% {
        transform:scale(1);
        -webkit-transform:scale(1);
    }
    50% {
        transform:scale(2);
        -webkit-transform:scale(2);
    }
    100% {
        transform:scale(1);
        -webkit-transform:scale(1);
    }
}

@keyframes scaleToggleTwo {
    0% {
        transform:scale(1);
        -webkit-transform:scale(1);
    }
    20% {
        transform:scale(1);
        -webkit-transform:scale(1);
    }
    60% {
        transform:scale(2);
        -webkit-transform:scale(2);
    }

    100% {
        transform:scale(1);
        -webkit-transform:scale(1);
    }
}

@keyframes scaleToggleThree {
    0% {
        transform:scale(1);
        -webkit-transform:scale(1);
    }
    33% {
        transform:scale(1);
        -webkit-transform:scale(1);
    }
    66% {
        transform:scale(2);
        -webkit-transform:scale(2);
    }
    100% {
        transform:scale(1);
        -webkit-transform:scale(1);
    }
}

.animated {
    -webkit-animation-duration: .5s;
    animation-duration: .5s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

.livechat-girl {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    position: fixed;
    bottom: 75px;
    right: -35px;
    opacity: 0;
    -webkit-box-shadow: 0 5px 10px 0 rgba(35,50,56,.3);
    box-shadow: 0 5px 10px 0 rgba(35,50,56,.3);
    z-index: 700;
    transform: translateY(0);
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    cursor: pointer;
    -webkit-transition: all 1s cubic-bezier(.86, 0, .07, 1);
    transition: all 1s cubic-bezier(.86, 0, .07, 1);
}

.livechat-girl:focus {
    outline: 0;
}

.livechat-girl.animated {
    opacity: 1;
    transform: translateY(-40px);
    -webkit-transform: translateY(-40px);
    -ms-transform: translateY(-40px);
}

.livechat-girl:after {
    content: '';
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-image: linear-gradient(to bottom, #26c7fc, #26c7fc);
    position: absolute;
    right: 1px;
    top: 1px;
    z-index: 50;
}

.red-dot:after {
    content: '';
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-image: linear-gradient(to bottom, #FF5722, #FF5722);
    position: absolute;
    right: 1px;
    top: 1px;
    z-index: 50;
}

.livechat-girl .girl {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    z-index: 50;
}

.livechat-girl .animated-circles .circle {
    background: rgba(38,199,252,.25);
    width: 60px;
    height: 60px;
    border-radius: 50%;
    position: absolute;
    z-index: 49;
    transform: scale(1);
    -webkit-transform: scale(1);
}

.livechat-girl .animated-circles.animated .c-1 { animation: 2s scaleToggleOne cubic-bezier(.25, .46, .45, .94) forwards }
.livechat-girl .animated-circles.animated .c-2 { animation: 2.5s scaleToggleTwo cubic-bezier(.25, .46, .45, .94) forwards }
.livechat-girl .animated-circles.animated .c-3 { animation: 3s scaleToggleThree cubic-bezier(.25, .46, .45, .94) forwards }
.livechat-girl.animation-stopped .circle { opacity: 0!important }
.livechat-girl.animation-stopped .circle { opacity: 0!important }
.livechat-girl .livechat-hint { position: absolute; right: 40px; top: 50%; margin-top: -20px; opacity: 0; z-index: 0; -webkit-transition: all .3s cubic-bezier(.86, 0, .07, 1); transition: all .3s cubic-bezier(.86, 0, .07, 1) }
.livechat-girl .livechat-hint.show_hint { -webkit-transform: translateX(-40px); transform: translateX(-40px); opacity:1; }
.livechat-girl .livechat-hint.hide_hint { opacity:0;-webkit-transform: translateX(0); transform: translateX(0) }
.livechat-girl .livechat-hint.rd-notice-tooltip { max-width: 1296px!important }
.livechat-girl .livechat-hint.rd-notice-tooltip .rd-notice-content { width: auto; overflow: hidden; text-overflow: ellipsis }
@media only screen and (max-width:1599px) {
    .livechat-girl .livechat-hint.rd-notice-tooltip { max-width: 1060px!important }
}
@media only screen and (max-width:1309px) {
    .livechat-girl .livechat-hint.rd-notice-tooltip { max-width: 984px!important }
}
@media only screen and (max-width:1124px) {
    .livechat-girl .livechat-hint.rd-notice-tooltip { max-width: 600px!important }
}
.rd-notice-tooltip { -webkit-box-shadow: 0 2px 2px rgba(0,0,0,.2); box-shadow: 0 2px 2px rgba(0,0,0,.2); font-size: 14px; border-radius: 3px; line-height: 1.25; position: absolute; z-index: 65; max-width: 350px; opacity: 1 }
.rd-notice-tooltip:after { position: absolute; display: block; content: ''; height: 20px; width: 20px; -webkit-box-shadow: none; box-shadow: none; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; z-index: 50 }
.rd-notice-tooltip .rd-notice-content { background: 0; border-radius: 3px; width: 100%; color: #fff; position: relative; z-index: 60; padding: 20px; font-weight: 400; line-height: 1.45 }
.rd-notice-type-success { background-color: #26c7fc; -webkit-box-shadow: 0 5px 10px 0 rgba(38,199,252,.2); box-shadow: 0 5px 10px 0 rgba(38,199,252,.2) }
.rd-notice-type-success .rd-notice-content { background-color: #26c7fc }
.rd-notice-type-success:after { background-color: #26c7fc; -webkit-box-shadow: 0 5px 10px 0 rgba(38,199,252,.2); box-shadow: 0 5px 10px 0 rgba(38,199,252,.2) }
.rd-notice-position-left { margin-left: -20px }
.rd-notice-position-left:after { right: -6px; top: 50%; margin-top: -10px }
.rd-notice-tooltip.single-line .rd-notice-content { height: 40px; padding: 0 20px; line-height: 40px; white-space: nowrap }

</style>


<script>
  $(".livechat-girl").hover(function() {
    console.log('2222')
    $(".livechat-hint").removeClass('hide_hite').addClass('show_hint')
  },function(){
    $(".livechat-hint").removeClass('show_hint').addClass('hide_hite')
  });
</script>

loading5

https://yy.mosq.cn/

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
<!-- Loading -->
  <div id="loading" class="loading-layer" style="">
    <div class="adjust-block">
        <div class="load ">
            <span class="sharingan"></span>
            <span class="sharingan"></span>
            <span class="sharingan"></span>
        </div>
    </div>
</div>

<!-- Loading css -->
.loading-layer {
  background-color: #162532;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  text-align: center;
  z-index: 500;
  /* display: none; */
  justify-content: center;
  align-items: center;
}

.load {
  width: 50px;
  height: 50px;
  margin: auto;
  position: relative;
  animation-fill-mode: both;
}
.adjust-block {
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  text-align: center;
}

.sharingan {
  width: 12px;
  height: 12px;
  border: 1px solid #20ddfd;
  background-color: #20ddfd;
  border-radius: 100%;
  display: block;
  position: absolute;
  -moz-animation-delay: 0;
  -webkit-animation-delay: 0;
  animation-delay: 0;
  -moz-animation-duration: 2s;
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
  -moz-animation-timing-function: ease-in-out;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
  -moz-animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}
.sharingan:nth-of-type(1) {
  -moz-animation-name: ball-triangle-path-1;
  -webkit-animation-name: ball-triangle-path-1;
  animation-name: ball-triangle-path-1;
  top: 50px;
}
.sharingan:nth-of-type(2) {
  left: 25px;
  -moz-animation-name: ball-triangle-path-2;
  -webkit-animation-name: ball-triangle-path-2;
  animation-name: ball-triangle-path-2;
}
.sharingan:nth-of-type(3) {
  top: 50px;
  left: 50px;
  -moz-animation-name: ball-triangle-path-3;
  -webkit-animation-name: ball-triangle-path-3;
  animation-name: ball-triangle-path-3;
}

@keyframes ball-triangle-path-1 {
  33% {
    transform: translate(25px, -50px);
  }
  66% {
    transform: translate(50px, 0px);
  }
  100% {
    transform: translate(0px, 0px);
  }
}
@keyframes ball-triangle-path-2 {
  33% {
    transform: translate(25px, 50px);
  }
  66% {
    transform: translate(-25px, 50px);
  }
  100% {
    transform: translate(0px, 0px);
  }
}
@keyframes ball-triangle-path-3 {
  33% {
    transform: translate(-50px, 0px);
  }
  66% {
    transform: translate(-25px, -50px);
  }
  100% {
    transform: translate(0px, 0px);
  }
}

londing6 bar

https://yy.mosq.cn/

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
<!--loading animate-->
<div id="loading" class="butterbar active">
  <span class="bar"></span>
</div>

<!-- CSS -->
#loading {
    width: 100%;
    z-index: 1;
  }

  .butterbar {
    position: relative;
    height: 3px;
    margin-bottom: -3px
  }

  .butterbar .bar {
    position: absolute;
    width: 100%;
    height: 0;
    text-indent: -9999px;
    background-color: #23b7e5
  }

  .butterbar .bar:before {
    position: absolute;
    right: 50%;
    left: 50%;
    height: 3px;
    background-color: inherit;
    content: ""
  }

  .butterbar.active {
    -webkit-animation: changebar 2.25s infinite .75s;
    -moz-animation: changebar 2.25s infinite .75s;
    animation: changebar 2.25s infinite .75s;
  }

  .butterbar.active .bar {
    -webkit-animation: changebar 2.25s infinite;
    -moz-animation: changebar 2.25s infinite;
    animation: changebar 2.25s infinite
  }

  .butterbar.active .bar:before {
    -webkit-animation: movingbar .75s infinite;
    -moz-animation: movingbar .75s infinite;
    animation: movingbar .75s infinite
  }

  @-webkit-keyframes movingbar {
    0% {
        right: 50%;
        left: 50%
    }

    99.9% {
        right: 0;
        left: 0
    }

    100% {
        right: 50%;
        left: 50%
    }
}

@-moz-keyframes movingbar {
    0% {
        right: 50%;
        left: 50%
    }

    99.9% {
        right: 0;
        left: 0
    }

    100% {
        right: 50%;
        left: 50%
    }
}

@keyframes movingbar {
    0% {
        right: 50%;
        left: 50%
    }

    99.9% {
        right: 0;
        left: 0
    }

    100% {
        right: 50%;
        left: 50%
    }
}

@-webkit-keyframes changebar {
    0% {
        background-color: #23b7e5
    }

    33.3% {
        background-color: #23b7e5
    }

    33.33% {
        background-color: #fad733
    }

    66.6% {
        background-color: #fad733
    }

    66.66% {
        background-color: #7266ba
    }

    99.9% {
        background-color: #7266ba
    }
}

@-moz-keyframes changebar {
    0% {
        background-color: #23b7e5
    }

    33.3% {
        background-color: #23b7e5
    }

    33.33% {
        background-color: #fad733
    }

    66.6% {
        background-color: #fad733
    }

    66.66% {
        background-color: #7266ba
    }

    99.9% {
        background-color: #7266ba
    }
}

@keyframes changebar {
    0% {
        background-color: #23b7e5
    }

    33.3% {
        background-color: #23b7e5
    }

    33.33% {
        background-color: #fad733
    }

    66.6% {
        background-color: #fad733
    }

    66.66% {
        background-color: #7266ba
    }

    99.9% {
        background-color: #7266ba
    }
}

londing7 圈

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
<!-- html -->
<div id="shade_animal_wrap">
  <div class="lds-hourglass"></div>
</div>

<!-- CSS -->
<style type="text/css">
    #shade_animal_wrap {
      opacity: 1;
      margin: 0;
      padding: 0;
      display: flex;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      align-items: center;
      justify-content: center;
      height: 100vh;
      width: 100%;
      background-color: #f2f2f2;
      z-index: 99999;
      transition: all 1s ease 0s;
    }
  
    .lds-hourglass {
      display: inline-block;
      position: relative;
      width: 64px;
      height: 64px;
      transform: translateX(-30px) translateY(-60px);
    }
  
    .lds-hourglass:after {
      content: " ";
      display: block;
      border-radius: 50%;
      width: 0;
      height: 0;
      margin: 6px;
      box-sizing: border-box;
      border: 60px solid #fff;
      border-color: #ff8d00 transparent #ff3004 transparent;
      animation: lds-hourglass 1.2s infinite;
    }
  
    @keyframes lds-hourglass {
      0% {
        transform: rotate(0);
        animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
      }
  
      50% {
        transform: rotate(900deg);
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
      }
  
      100% {
        transform: rotate(1800deg);
      }
    }
  </style>

赏 支付宝打赏 微信打赏

赞赏一下 坚持原创技术分享，您的支持将鼓励我继续创作！



FEATURED TAGS
CSS Loading
FRIENDS