1 | <style media="screen">
|
2 | html, body {
|
3 | height: 100%;
|
4 | min-height: 100%;
|
5 | margin: 0;
|
6 | }
|
7 |
|
8 | /*
|
9 | body.js-load > .loader {
|
10 | animation: jsload .5s ease-in-out;
|
11 | }
|
12 | */
|
13 | .ua_js_no body {
|
14 | overflow: hidden;
|
15 | }
|
16 | .ua_js_yes body {
|
17 | overflow: auto;
|
18 | }
|
19 | .ua_js_yes .loader {
|
20 | display: none;
|
21 | }
|
22 |
|
23 | .loader {
|
24 | width: 100%;
|
25 | height: 100%;
|
26 | position: absolute;
|
27 | z-index: 100000;
|
28 | opacity: 1;
|
29 | top: 0;
|
30 | }
|
31 | .sk-container {
|
32 | width: 100%;
|
33 | height: 100%;
|
34 | position: absolute;
|
35 | background-color: #2b87c2;
|
36 | -webkit-animation: background 4.0s infinite linear;
|
37 | animation: background 4.0s infinite linear;
|
38 | }
|
39 | .sk-wrapper {
|
40 | position: absolute;
|
41 | top: 0;
|
42 | bottom: 0;
|
43 | right: 0;
|
44 | left: 0;
|
45 | margin: auto;
|
46 | width: 40px;
|
47 | height: 40px;
|
48 | }
|
49 |
|
50 | .sk-cube-grid {
|
51 | width: 40px;
|
52 | height: 40px;
|
53 | }
|
54 |
|
55 | .sk-cube-grid .sk-cube {
|
56 | width: 33%;
|
57 | height: 33%;
|
58 | background-color: white;
|
59 | float: left;
|
60 | -webkit-animation: sk-cubeGridScaleDelay 1.0s infinite ease-in-out;
|
61 | animation: sk-cubeGridScaleDelay 1.0s infinite ease-in-out;
|
62 | }
|
63 |
|
64 | .sk-cube-grid .sk-cube1 {
|
65 | -webkit-animation-delay: 0.2s;
|
66 | animation-delay: 0.2s;
|
67 | }
|
68 |
|
69 | .sk-cube-grid .sk-cube2 {
|
70 | -webkit-animation-delay: 0.3s;
|
71 | animation-delay: 0.3s;
|
72 | }
|
73 |
|
74 | .sk-cube-grid .sk-cube3 {
|
75 | -webkit-animation-delay: 0.4s;
|
76 | animation-delay: 0.4s;
|
77 | }
|
78 |
|
79 | .sk-cube-grid .sk-cube4 {
|
80 | -webkit-animation-delay: 0.1s;
|
81 | animation-delay: 0.1s;
|
82 | }
|
83 |
|
84 | .sk-cube-grid .sk-cube5 {
|
85 | -webkit-animation-delay: 0.2s;
|
86 | animation-delay: 0.2s;
|
87 | }
|
88 |
|
89 | .sk-cube-grid .sk-cube6 {
|
90 | -webkit-animation-delay: 0.3s;
|
91 | animation-delay: 0.3s;
|
92 | }
|
93 |
|
94 | .sk-cube-grid .sk-cube7 {
|
95 | -webkit-animation-delay: 0s;
|
96 | animation-delay: 0s;
|
97 | }
|
98 |
|
99 | .sk-cube-grid .sk-cube8 {
|
100 | -webkit-animation-delay: 0.1s;
|
101 | animation-delay: 0.1s;
|
102 | }
|
103 |
|
104 | .sk-cube-grid .sk-cube9 {
|
105 | -webkit-animation-delay: 0.2s;
|
106 | animation-delay: 0.2s;
|
107 | }
|
108 | @-webkit-keyframes background {
|
109 | 0% {
|
110 | background-color: #2b87c2;
|
111 | }
|
112 | 50% {
|
113 | background-color: #8d76be;
|
114 | }
|
115 | 100% {
|
116 | background-color: #2b87c2;
|
117 | }
|
118 | }
|
119 | @keyframes background {
|
120 | 0% {
|
121 | background-color: #2b87c2;
|
122 | }
|
123 | 50% {
|
124 | background-color: #8d76be;
|
125 | }
|
126 | 100% {
|
127 | background-color: #2b87c2;
|
128 | }
|
129 | }
|
130 | @-webkit-keyframes jsload {
|
131 | 0% {
|
132 | opacity: 1;
|
133 | }
|
134 | 100% {
|
135 | opacity: 0;
|
136 | }
|
137 | }
|
138 | @keyframes jsload {
|
139 | 0% {
|
140 | opacity: 1;
|
141 | }
|
142 | 100% {
|
143 | opacity: 0;
|
144 | }
|
145 | }
|
146 | @-webkit-keyframes sk-cubeGridScaleDelay {
|
147 | 0%,
|
148 | 70%,
|
149 | 100% {
|
150 | -webkit-transform: scale3D(1, 1, 1);
|
151 | transform: scale3D(1, 1, 1);
|
152 | }
|
153 | 35% {
|
154 | -webkit-transform: scale3D(0, 0, 1);
|
155 | transform: scale3D(0, 0, 1);
|
156 | }
|
157 | }
|
158 |
|
159 | @keyframes sk-cubeGridScaleDelay {
|
160 | 0%,
|
161 | 70%,
|
162 | 100% {
|
163 | -webkit-transform: scale3D(1, 1, 1);
|
164 | transform: scale3D(1, 1, 1);
|
165 | }
|
166 | 35% {
|
167 | -webkit-transform: scale3D(0, 0, 1);
|
168 | transform: scale3D(0, 0, 1);
|
169 | }
|
170 | }
|
171 | </style>
|
172 | <div class='loader'>
|
173 | <div class='sk-container'>
|
174 | <div class="sk-wrapper">
|
175 | <div class="sk-cube-grid">
|
176 | <div class="sk-cube sk-cube1"></div>
|
177 | <div class="sk-cube sk-cube2"></div>
|
178 | <div class="sk-cube sk-cube3"></div>
|
179 | <div class="sk-cube sk-cube4"></div>
|
180 | <div class="sk-cube sk-cube5"></div>
|
181 | <div class="sk-cube sk-cube6"></div>
|
182 | <div class="sk-cube sk-cube7"></div>
|
183 | <div class="sk-cube sk-cube8"></div>
|
184 | <div class="sk-cube sk-cube9"></div>
|
185 | </div>
|
186 | </div>
|
187 | </div>
|
188 | </div>
|