stear/extra/Elements/loading1.js

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