Skip to content

Commit 99c39e5

Browse files
bgoonzbgoonz
authored
Add files via upload
1 parent 1c17532 commit 99c39e5

1 file changed

Lines changed: 266 additions & 0 deletions

File tree

‎index.html‎

Lines changed: 266 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,266 @@
1+
<html>
2+
<head>
3+
<meta charset="utf-8" />
4+
<meta
5+
name="viewport"
6+
content="width=device-width, initial-scale=1, user-scalable=no"
7+
/>
8+
<link rel="stylesheet" href="styles.min.css?v8" />
9+
<style>
10+
body,
11+
html {
12+
margin: 0;
13+
width: 100%;
14+
height: 100%;
15+
}
16+
</style>
17+
</head>
18+
<body>
19+
<pixie-editor>
20+
<div class="global-spinner">
21+
<style>
22+
.global-spinner {
23+
display: none;
24+
align-items: center;
25+
justify-content: center;
26+
z-index: 999;
27+
background: #fff;
28+
position: fixed;
29+
top: 0;
30+
left: 0;
31+
width: 100%;
32+
height: 100%;
33+
}
34+
</style>
35+
<style>
36+
.la-ball-spin-clockwise,
37+
.la-ball-spin-clockwise > div {
38+
position: relative;
39+
-webkit-box-sizing: border-box;
40+
-moz-box-sizing: border-box;
41+
box-sizing: border-box;
42+
}
43+
.la-ball-spin-clockwise {
44+
display: block;
45+
font-size: 0;
46+
color: #1976d2;
47+
}
48+
.la-ball-spin-clockwise.la-dark {
49+
color: #333;
50+
}
51+
.la-ball-spin-clockwise > div {
52+
display: inline-block;
53+
float: none;
54+
background-color: currentColor;
55+
border: 0 solid currentColor;
56+
}
57+
.la-ball-spin-clockwise {
58+
width: 32px;
59+
height: 32px;
60+
}
61+
.la-ball-spin-clockwise > div {
62+
position: absolute;
63+
top: 50%;
64+
left: 50%;
65+
width: 8px;
66+
height: 8px;
67+
margin-top: -4px;
68+
margin-left: -4px;
69+
border-radius: 100%;
70+
-webkit-animation: ball-spin-clockwise 1s infinite ease-in-out;
71+
-moz-animation: ball-spin-clockwise 1s infinite ease-in-out;
72+
-o-animation: ball-spin-clockwise 1s infinite ease-in-out;
73+
animation: ball-spin-clockwise 1s infinite ease-in-out;
74+
}
75+
.la-ball-spin-clockwise > div:nth-child(1) {
76+
top: 5%;
77+
left: 50%;
78+
-webkit-animation-delay: -0.875s;
79+
-moz-animation-delay: -0.875s;
80+
-o-animation-delay: -0.875s;
81+
animation-delay: -0.875s;
82+
}
83+
.la-ball-spin-clockwise > div:nth-child(2) {
84+
top: 18.1801948466%;
85+
left: 81.8198051534%;
86+
-webkit-animation-delay: -0.75s;
87+
-moz-animation-delay: -0.75s;
88+
-o-animation-delay: -0.75s;
89+
animation-delay: -0.75s;
90+
}
91+
.la-ball-spin-clockwise > div:nth-child(3) {
92+
top: 50%;
93+
left: 95%;
94+
-webkit-animation-delay: -0.625s;
95+
-moz-animation-delay: -0.625s;
96+
-o-animation-delay: -0.625s;
97+
animation-delay: -0.625s;
98+
}
99+
.la-ball-spin-clockwise > div:nth-child(4) {
100+
top: 81.8198051534%;
101+
left: 81.8198051534%;
102+
-webkit-animation-delay: -0.5s;
103+
-moz-animation-delay: -0.5s;
104+
-o-animation-delay: -0.5s;
105+
animation-delay: -0.5s;
106+
}
107+
.la-ball-spin-clockwise > div:nth-child(5) {
108+
top: 94.9999999966%;
109+
left: 50.0000000005%;
110+
-webkit-animation-delay: -0.375s;
111+
-moz-animation-delay: -0.375s;
112+
-o-animation-delay: -0.375s;
113+
animation-delay: -0.375s;
114+
}
115+
.la-ball-spin-clockwise > div:nth-child(6) {
116+
top: 81.8198046966%;
117+
left: 18.1801949248%;
118+
-webkit-animation-delay: -0.25s;
119+
-moz-animation-delay: -0.25s;
120+
-o-animation-delay: -0.25s;
121+
animation-delay: -0.25s;
122+
}
123+
.la-ball-spin-clockwise > div:nth-child(7) {
124+
top: 49.9999750815%;
125+
left: 5.0000051215%;
126+
-webkit-animation-delay: -0.125s;
127+
-moz-animation-delay: -0.125s;
128+
-o-animation-delay: -0.125s;
129+
animation-delay: -0.125s;
130+
}
131+
.la-ball-spin-clockwise > div:nth-child(8) {
132+
top: 18.179464974%;
133+
left: 18.1803700518%;
134+
-webkit-animation-delay: 0s;
135+
-moz-animation-delay: 0s;
136+
-o-animation-delay: 0s;
137+
animation-delay: 0s;
138+
}
139+
.la-ball-spin-clockwise.la-sm {
140+
width: 16px;
141+
height: 16px;
142+
}
143+
.la-ball-spin-clockwise.la-sm > div {
144+
width: 4px;
145+
height: 4px;
146+
margin-top: -2px;
147+
margin-left: -2px;
148+
}
149+
.la-ball-spin-clockwise.la-2x {
150+
width: 64px;
151+
height: 64px;
152+
}
153+
.la-ball-spin-clockwise.la-2x > div {
154+
width: 16px;
155+
height: 16px;
156+
margin-top: -8px;
157+
margin-left: -8px;
158+
}
159+
.la-ball-spin-clockwise.la-3x {
160+
width: 96px;
161+
height: 96px;
162+
}
163+
.la-ball-spin-clockwise.la-3x > div {
164+
width: 24px;
165+
height: 24px;
166+
margin-top: -12px;
167+
margin-left: -12px;
168+
}
169+
@-webkit-keyframes ball-spin-clockwise {
170+
0%,
171+
100% {
172+
opacity: 1;
173+
-webkit-transform: scale(1);
174+
transform: scale(1);
175+
}
176+
20% {
177+
opacity: 1;
178+
}
179+
80% {
180+
opacity: 0;
181+
-webkit-transform: scale(0);
182+
transform: scale(0);
183+
}
184+
}
185+
@-moz-keyframes ball-spin-clockwise {
186+
0%,
187+
100% {
188+
opacity: 1;
189+
-moz-transform: scale(1);
190+
transform: scale(1);
191+
}
192+
20% {
193+
opacity: 1;
194+
}
195+
80% {
196+
opacity: 0;
197+
-moz-transform: scale(0);
198+
transform: scale(0);
199+
}
200+
}
201+
@-o-keyframes ball-spin-clockwise {
202+
0%,
203+
100% {
204+
opacity: 1;
205+
-o-transform: scale(1);
206+
transform: scale(1);
207+
}
208+
20% {
209+
opacity: 1;
210+
}
211+
80% {
212+
opacity: 0;
213+
-o-transform: scale(0);
214+
transform: scale(0);
215+
}
216+
}
217+
@keyframes ball-spin-clockwise {
218+
0%,
219+
100% {
220+
opacity: 1;
221+
-webkit-transform: scale(1);
222+
-moz-transform: scale(1);
223+
-o-transform: scale(1);
224+
transform: scale(1);
225+
}
226+
20% {
227+
opacity: 1;
228+
}
229+
80% {
230+
opacity: 0;
231+
-webkit-transform: scale(0);
232+
-moz-transform: scale(0);
233+
-o-transform: scale(0);
234+
transform: scale(0);
235+
}
236+
}
237+
</style>
238+
<div class="la-ball-spin-clockwise la-2x">
239+
<div></div>
240+
<div></div>
241+
<div></div>
242+
<div></div>
243+
<div></div>
244+
<div></div>
245+
<div></div>
246+
<div></div>
247+
</div>
248+
</div>
249+
<script>
250+
setTimeout(function() {
251+
var spinner = document.querySelector(".global-spinner");
252+
if (spinner) spinner.style.display = "flex";
253+
}, 50);
254+
</script>
255+
</pixie-editor>
256+
<script src="scripts.min.js?v8"></script>
257+
258+
<script>
259+
var pixie = new Pixie({
260+
onLoad: function() {
261+
window.postMessage("pixieLoaded", "*");
262+
}
263+
});
264+
</script>
265+
</body>
266+
</html>

0 commit comments

Comments
 (0)