ignite-html-material/circular-progress.js

import { IgniteElement } from "../ignite-html/ignite-element.js";
import { IgniteTemplate, slot, div, svg, circle } from "../ignite-html/ignite-template.js";

class CircularProgress extends IgniteElement {
    constructor() {
        super();
    }

    get styles() {
        return /*css*/`
        mt-circular-progress > div > svg {
            position: absolute;
            z-index: 1;
            left: calc(50% - (4em / 2));
            top: calc(50% - (4em / 2));
            animation: rotator 2s linear infinite;
        }
          
        mt-circular-progress > div > svg > circle {
            stroke-dasharray: 80px, 200px;
            stroke-dashoffset: 0px;
            animation: dash 2s ease-in-out infinite, colors 5.6s ease-in-out infinite;
        }

        @keyframes rotator {
            0% {
                transform: rotate(0deg);
            }
            100% {
                transform: rotate(360deg);
            }
        }
          
        @keyframes colors {
            0% {
                stroke: #4285F4;
            }
            25% {
                stroke: #DE3E35;
            }
            50% {
                stroke: #F7C223;
            }
            75% {
                stroke: #1B9A59;
            }
            100% {
                stroke: #4285F4;
            }
        }

        @keyframes dash {
            0% {
                stroke-dasharray: 1px, 200px;
                stroke-dashoffset: 0px;
            }
            50% {
                stroke-dasharray: 100px, 200px;
                stroke-dashoffset: -15px;
            }
            100% {
                stroke-dasharray: 100px, 200px;
                stroke-dashoffset: -125px;
            }
        }
        `;
    }

    get properties() {
        return {
            loading: true,
            size: "4em",
            stroke: "3.6"
        };
    }

    render() {
        return this.template.child(
            new div().style("position", "relative").child(
                new svg()
                    .attribute("viewBox", "22 22 44 44")
                    .style("width", this.size)
                    .style("height", this.size)
                    .show(this.loading)
                    .child(
                        new circle()
                            .attribute("cx", "44")
                            .attribute("cy", "44")
                            .attribute("r", "20.2")
                            .attribute("fill", "none")
                            .attribute("stroke-width", this.stroke)
                    ),
                new slot(this)
            )
        )
    }
}

class CircularProgressTemplate extends IgniteTemplate {
    constructor(...children) {
        super("mt-circular-progress", children);
    }
}

customElements.define("mt-circular-progress", CircularProgress);

export {
    CircularProgressTemplate as CircularProgress
}