Added new circular progress component.

2020-12-01 00:16:40 -08:00 · 2020-12-01 00:16:40 -08:00 · 0254076862
commit 0254076862
parent e9bb8909c9
1 changed files with 108 additions and 0 deletions
--- a/circular-progress.js
+++ b/circular-progress.js
@ -0,0 +1,108 @@
+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 `
+        mt-circular-progress > div > svg {
+            position: absolute;
+            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
+}