SVG handling

2019-11-22 16:15:53 +01:00
parent 029fe16b6d
commit 698656c8f6
10 changed files with 147 additions and 14 deletions
--- a/test/svg/svg-loader.jsx
+++ b/test/svg/svg-loader.jsx
@@ -0,0 +1,55 @@
+import {CustomElement, defineElement, Host, ShadowDOM, State} from "../../packages/csx";
+import loaderComponentShadowStyle from './svg-loader.shadow.scss';
+
+// TODO configurability, like inverted and not with props...
+
+@defineElement('svg-loader')
+export class SvgLoader extends CustomElement{
+    // Constructor
+    constructor(){
+        super();
+    }
+    
+    // Private properties
+    
+    // Properties
+    
+    // Handlers
+    
+    // CustomElement
+    render(){
+        return (
+            <Host>
+                <ShadowDOM>
+                    <style>
+                        { loaderComponentShadowStyle }
+                    </style>
+                    
+                    <div class="loader-content">
+                        <div class="spinner">
+                            <svg width="38" height="38" viewBox="0 0 38 38" xmlns="http://www.w3.org/2000/svg" stroke="#000">
+                                <g fill="none" fill-rule="evenodd">
+                                    <g transform="translate(1 1)" stroke-width="2">
+                                        <circle stroke-opacity=".5" cx="18" cy="18" r="18"/>
+                                        <path d="M36 18c0-9.94-8.06-18-18-18">
+                                            <animateTransform
+                                                attributeName="transform"
+                                                type="rotate"
+                                                from="0 18 18"
+                                                to="360 18 18"
+                                                dur="1s"
+                                                repeatCount="indefinite"/>
+                                        </path>
+                                    </g>
+                                </g>
+                            </svg>
+                        </div>
+    
+                        <slot>
+                        </slot>
+                    </div>
+                </ShadowDOM>
+            </Host>
+        )
+    }
+}