8
8
< script type ="text/javascript " src ="/Utilities/Scripts/webdom.js "> </ script >
9
9
< script type ="text/javascript " src ="../Scripts/Public.js "> </ script >
10
10
< style type ="text/css ">
11
- * [v-cloak ]{
12
- text-align : left !important ;
13
- color : # 999 ;
14
- }
15
- * [v-cloak ]> * {
16
- display : none !important ;
17
- }
18
- * [v-cloak ]::before {
19
- content : "/" ;
20
- display : block;
21
- width : 24px ;
22
- height : 24px ;
23
- text-align : center;
24
- float : left;
25
- font-size : 16px ;
26
- animation : rotate_360 0.5s infinite linear;
27
- transform-origin : center center;
28
- }
29
- * [v-cloak ]::after {
30
- content : "loading ... " ;
31
- display : block;
32
- font-size : 13px ;
33
- margin-left : 10px ;
34
- line-height : 20px ;
35
- position : absolute;
36
- top : 8px ;
37
- left : 20px ;
38
- }
11
+ * [v-cloak ] {
12
+ text-align : left !important ;
13
+ color : # 999 ;
14
+ width : 300px !important ;
15
+ height : 150px !important ;
16
+ margin : 50px auto !important ;
17
+ padding : 50px 80px !important ;
18
+ overflow : hidden !important ;
19
+ display : flex;
20
+ box-sizing : border-box;
21
+
22
+ border-width : 0px 0px 20px 0px ;
23
+ border-style : solid;
24
+ background-color : white;
25
+ animation : gradient_animation .3s infinite linear;
26
+ }
27
+
28
+ * [v-cloak ]> * {
29
+ display : none !important ;
30
+ }
31
+
32
+ * [v-cloak ]::before {
33
+ content : "/" ;
34
+ display : block;
35
+ width : 30px ;
36
+ height : 30px ;
37
+ line-height : 28px ;
38
+ text-align : center;
39
+ font-weight : bold;
40
+ font-size : 26px ;
41
+ animation : rotate_360 0.15s infinite linear;
42
+ transform-origin : center center;
43
+ }
44
+
45
+ * [v-cloak ]::after {
46
+ content : "loading ... " ;
47
+ font-size : 18px ;
48
+ margin : 5px 0px 0px 10px ;
49
+ }
50
+
39
51
@keyframes rotate_360 {
40
52
0% {
41
53
transform : rotate (0deg );
57
69
transform : rotate (360deg );
58
70
}
59
71
}
72
+
73
+ @keyframes gradient_animation {
74
+ 0% {
75
+ border-image : linear-gradient (to right, rgb (140 , 197 , 255 ) 0% , # eee 10% , # eee 100% ) 1 ;
76
+
77
+ }
78
+
79
+ 25% {
80
+ border-image : linear-gradient (to right, rgb (140 , 197 , 255 ) 10% , # eee 20% , # eee 100% ) 1 ;
81
+
82
+ }
83
+
84
+ 50% {
85
+ border-image : linear-gradient (to right, rgb (140 , 197 , 255 ) 50% , # eee 50% , # eee 100% ) 1 ;
86
+
87
+ }
88
+
89
+ 75% {
90
+ border-image : linear-gradient (to right, rgb (140 , 197 , 255 ) 80% , # eee 80% , # eee 100% ) 1 ;
91
+
92
+ }
93
+
94
+ 100% {
95
+ border-image : linear-gradient (to right, rgb (140 , 197 , 255 ) 90% , # eee 100% ) 1 ;
96
+
97
+ }
98
+ }
60
99
</ style >
0 commit comments