ponder.ooo
馃悕馃悕馃悕
1
2$css(`
3 .spinner {
4 opacity: 1;
5 width: 0px;
6 height: 0px;
7 position: relative;
8 top: 50%;
9 left: 50%;
10 transform: translate(-50%, -50%);
11 background-color: transparent;
12 animation: spin 2.7s infinite linear;
13 transition: opacity 1.5s ease-in;
14 overflow: initial;
15 }
16
17 .spinner-button {
18 position: absolute;
19 top: 50%;
20 left: 50%;
21 transform: translate(-50%, -50%);
22 width: 4em;
23 height: 4em;
24 border-radius: 50%;
25 border: none;
26 opacity: 0;
27 transition: opacity 1s ease;
28 background-color: var(--main-solid);
29 color: var(--main-solid-content);
30 cursor: pointer;
31 display: none;
32 padding: 0;
33 }
34
35 .spinner-button:hover {
36 background-color: var(--main-transparent);
37 }
38
39 .spinner-orb {
40 position: absolute;
41 top: 50%;
42 left: 50%;
43 transform-origin: center;
44 transform: translate(-50%, -50%);
45 background-color: transparent;
46 border: 0.3em solid var(--main-solid);
47 border-radius: 50%;
48 transition: left 1.3s ease;
49 overflow: initial;
50 }
51
52 .spinner-orb[class*=" 0"] {
53 width: 100px;
54 height: 100px;
55 left: 0.5em;
56 border-width: 0.5em;
57 animation: spin 3.3s infinite linear;
58 }
59
60 .spinner-orb[class*=" 1"] {
61 width: 75px;
62 height: 75px;
63 left: 175px;
64 animation: spin 0.8s reverse infinite linear;
65 }
66
67 .spinner-orb[class*=" 2"] {
68 width: 55px;
69 height: 55px;
70 left: -200px;
71 border-width: 0.15em;
72 transform: translate(-50%, -50%);
73 }
74
75 @keyframes spin {
76 from {
77 transform: translate(-50%, -50%) rotate(0deg);
78 }
79
80 to {
81 transform: translate(-50%, -50%) rotate(360deg);
82 }
83 }
84`);
85
86export async function main(target, modNext = "layout/nothing") {
87 let spinner = $div("spinner");
88 let orb0 = $div("spinner-orb 0");
89 let orb1 = $div("spinner-orb 1");
90 let orb2 = $div("spinner-orb 2");
91 let button = $element("button");
92
93 button.innerText = "enter";
94 button.classList.add("spinner-button");
95
96 target.$with(
97 spinner.$with(
98 orb0.$with(
99 orb1.$with(orb2)
100 )
101 ),
102 button
103 );
104
105 let removeLoader = async (e) => {
106 spinner.style.opacity = "0";
107 button.style.opacity = "0";
108 orb0.style.left = "50%";
109 orb1.style.left = "50%";
110 orb2.style.left = "50%";
111 await $mod(modNext, spinner.parentNode);
112 setTimeout(async () => {
113 spinner.remove();
114 button.remove();
115 }, 1500);
116 };
117
118 setTimeout(() => {
119 button.style.opacity = 1;
120 }, 100);
121 button.addEventListener("click", removeLoader);
122 button.style.display = "initial";
123
124 return {
125 replace: true
126 };
127}
128