From b5d8c4c140e93dc3c6eae0fdb01a8e2071e8ba1e Mon Sep 17 00:00:00 2001
From: jusax23 <jusax23@gmail.com>
Date: Thu, 9 Jun 2022 16:36:21 +0200
Subject: [PATCH] loading1

---
 example/connect.js       |  7 +++---
 example/waitStyle.js     | 42 -------------------------------
 stear/extras/loading1.js | 53 ++++++++++++++++++++++++++++++++++++++++
 3 files changed, 56 insertions(+), 46 deletions(-)
 delete mode 100644 example/waitStyle.js
 create mode 100644 stear/extras/loading1.js

diff --git a/example/connect.js b/example/connect.js
index 43b1e7e..b2defd8 100644
--- a/example/connect.js
+++ b/example/connect.js
@@ -1,6 +1,7 @@
+import { l1 } from "../stear/extras/loading1.js";
 import { _ } from "../stear/main.js";
 import { fadein, fadeout, wait } from "../stear/utils.js";
-import "./waitStyle.js";
+//import "./waitStyle.js";
 
 export const preRender = true;
 
@@ -20,9 +21,7 @@ _({find:"main"},[
         top: "50%",
         transform: "translate(-50%, -50%)",
     }},[
-        _({class:"box"},[
-            _(), _(), _()
-        ])
+        l1()
     ])
 ]);
 
diff --git a/example/waitStyle.js b/example/waitStyle.js
deleted file mode 100644
index 0317414..0000000
--- a/example/waitStyle.js
+++ /dev/null
@@ -1,42 +0,0 @@
-import { Stear } from "../stear/main.js";
-
-var animation = Stear.addAnimation({
-    "0%":     {left:  "4%",top:  "4%"},
-    "8.33%":  {left: "52%",top:  "4%"},
-    "25%":    {left: "52%",top:  "4%"},
-    "33.33%": {left: "52%",top: "52%"},
-    "50%":    {left: "52%",top: "52%"},
-    "58.33%": {left:  "4%",top: "52%"},
-    "75%":    {left:  "4%",top: "52%"},
-    "83.33%": {left:  "4%",top:  "4%"},
-    "100%":   {left:  "4%",top:  "4%"},
-});
-
-Stear.addGlobalStyleJSON({
-    display: "inline-block",
-    position: "relative",
-    width: "80px",
-    height: "80px",
-},".box");
-
-Stear.addGlobalStyleJSON({
-    position: "absolute",
-    height: "44%",
-    width: "44%",
-    borderRadius: "25%",
-    backgroundColor: "#000",
-    animation: `${animation} 6s linear infinite`,
-},".box div");
-
-Stear.addGlobalStyleJSON({
-    animationDelay: "0s"
-}, ".box div:nth-child(1)");
-
-Stear.addGlobalStyleJSON({
-    animationDelay: "-2s"
-}, ".box div:nth-child(2)");
-
-Stear.addGlobalStyleJSON({
-    animationDelay: "-4s"
-}, ".box div:nth-child(3)");
-
diff --git a/stear/extras/loading1.js b/stear/extras/loading1.js
new file mode 100644
index 0000000..28773ec
--- /dev/null
+++ b/stear/extras/loading1.js
@@ -0,0 +1,53 @@
+import { class_, Stear, _ } from "../main.js";
+
+export class loading1 extends class_{
+    constructor(){
+        super({ class: "box" }, [
+            _(), _(), _()
+        ]);
+    }
+}
+
+export const l1 = () => new loading1();
+
+
+var animation = Stear.addAnimation({
+    "0%": { left: "4%", top: "4%" },
+    "8.33%": { left: "52%", top: "4%" },
+    "25%": { left: "52%", top: "4%" },
+    "33.33%": { left: "52%", top: "52%" },
+    "50%": { left: "52%", top: "52%" },
+    "58.33%": { left: "4%", top: "52%" },
+    "75%": { left: "4%", top: "52%" },
+    "83.33%": { left: "4%", top: "4%" },
+    "100%": { left: "4%", top: "4%" },
+});
+
+Stear.addGlobalStyleJSON({
+    display: "inline-block",
+    position: "relative",
+    width: "80px",
+    height: "80px",
+}, ".box");
+
+Stear.addGlobalStyleJSON({
+    position: "absolute",
+    height: "44%",
+    width: "44%",
+    borderRadius: "25%",
+    backgroundColor: "#000",
+    animation: `${animation} 6s linear infinite`,
+}, ".box div");
+
+Stear.addGlobalStyleJSON({
+    animationDelay: "0s"
+}, ".box div:nth-child(1)");
+
+Stear.addGlobalStyleJSON({
+    animationDelay: "-2s"
+}, ".box div:nth-child(2)");
+
+Stear.addGlobalStyleJSON({
+    animationDelay: "-4s"
+}, ".box div:nth-child(3)");
+