55 lines
1.3 KiB
JavaScript
55 lines
1.3 KiB
JavaScript
import { class_, Stear, _ } from "../../main.js";
|
|
|
|
export class loading1 extends class_{
|
|
constructor(color){
|
|
super({ class: "box" }, [
|
|
_({ style: { backgroundColor: color}}),
|
|
_({ style: { backgroundColor: color}}),
|
|
_({ style: { backgroundColor: color}}),
|
|
]);
|
|
}
|
|
}
|
|
|
|
export const l1 = (color="black") => new loading1(color);
|
|
|
|
export default l1;
|
|
|
|
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%",
|
|
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)");
|
|
|