jusax23/stear
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

loading1

Browse source
This commit is contained in:
jusax23 2022-06-09 16:36:21 +02:00
parent a99ed59f6c
commit b5d8c4c140
3 changed files with 56 additions and 46 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
example/connect.js
View file

@ -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()
])
]);

42
example/waitStyle.js
View file

@ -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)");

53
stear/extras/loading1.js Normal file
View file

@ -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)");