Added linear progress component. Fixed a z-index issues with the circular progress. Added better border support for editable labels and chip lists.

2020-12-01 11:49:01 -08:00
parent 0254076862
commit d24c50cacb
4 changed files with 118 additions and 14 deletions
--- a/linear-progress.js
+++ b/linear-progress.js
@@ -0,0 +1,90 @@
+import { IgniteElement } from "../ignite-html/ignite-element.js";
+import { IgniteTemplate, slot, div, svg, circle } from "../ignite-html/ignite-template.js";
+
+class LinearProgress extends IgniteElement {
+    constructor() {
+        super();
+    }
+
+    get styles() {
+        return `
+            mt-linear-progress {
+                display: flex;
+                align-items: center;
+                justify-content: center;
+            }
+            
+            mt-linear-progress > div {
+                height: 0.3em;
+                width: 100%;
+                position: relative;
+                overflow: hidden;
+                background-color: #ddd;
+            }
+            
+            mt-linear-progress > div > div {
+                display: block;
+                position: absolute;
+                content: "";
+                left: -30em;
+                width: 30em;
+                height: 0.3em;
+                background-color: #26B3FC;
+                animation: loading 2s linear infinite;
+            }
+            
+            @keyframes loading {
+                from {
+                    left: -30em;
+                    width: 0%;
+                }
+            
+                50% {
+                    width: 30%;
+                }
+            
+                70% {
+                    width: 70%;
+                }
+            
+                80% {
+                    left: 50%;
+                }
+            
+                95% {
+                    left: 120%;
+                }
+            
+                to {
+                    left: 100%;
+                }
+            }
+        `;
+    }
+
+    get properties() {
+        return {
+            loading: true,
+        };
+    }
+
+    render() {
+        return this.template.child(
+            new div(
+                new div()
+            )
+        ).show(this.loading)
+    }
+}
+
+class LinearProgressTemplate extends IgniteTemplate {
+    constructor(...children) {
+        super("mt-linear-progress", children);
+    }
+}
+
+customElements.define("mt-linear-progress", LinearProgress);
+
+export {
+    LinearProgressTemplate as LinearProgress
+}