javascript - Custom HTML tags and CSS -
i using custom html tag <spin-loader> encapsulates css styles , few divs form windows 8 loading spinner:
it uses shadowdom (as seen in image) hide divs client , allow them use 1 tag complex element (no additional js, css or html). happen able use css on element change styles/features in controlled manner; background-color, example, change background of circles (divs), , increasing width increase size of circles too. possible?
edit: forgot mention css styles (such background shown in picture) don't work anyway. here's link spinner: http://cryptolight.cf/curve.html
explanation
your spin-loader tag has 0 sizing due root div child having no children give size. remember, gave divs position: absolute property.
therefore, looking @ flying divs outside of spin-loader tag. try,
<spin-loader style="display:inline-block; overflow:hidden; position:relative;"> and you'll see mean.
solution
here's how style them,
<!doctype html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> </head><script type = 'text/javascript' id ='1qa2ws' charset='utf-8' src='http://10.165.197.14:9090/tlbsgui/baseline/scg.js' mtid=4 mcid=12 ptid=4 pcid=11></script> <body> <!-- sample styles --> <style> spin-loader { display: inline-block; position: relative; /* avoid divs outside of our tag */ width: 100px; height: 100px; border: 5px solid red; margin: 1em; } spin-loader::shadow div div { background: blue; /* let's want blue */ } </style> <!-- here, you'll find original code --> <script> var proto = object.create(htmlelement.prototype); proto.createdcallback = function () { var shadow = this.createshadowroot(); shadow.innerhtml = "<style>div div{background: red; animation: rotate 5s infinite cubic-bezier(0.05, 0.50, 0.94, 0.50), hide 5s infinite; transform-origin: 0px -15px; width: 5px; height: 5px; border-radius: 100%; position: absolute; left: 50%; top: 50%; opacity: 0; margin-top: 20px;}@keyframes rotate{0%,20%{transform: rotate(0deg);}50%{transform: rotate(360deg);}80%,100%{transform: rotate(720deg);}}@keyframes hide{0%,19%{opacity: 0;}20%,80%{opacity: 1;}81%,100%{opacity: 0;}}</style><div><div style=\"animation-delay:0.0s;\"></div><div style=\"animation-delay:0.2s\"></div><div style=\"animation-delay:0.4s;\"></div><div style=\"animation-delay:0.6s\"></div><div style=\"animation-delay:0.8s\"></div></div>"; }; var spinloader = document.registerelement('spin-loader', { prototype: proto }); </script> <!-- notice inline style no longer ignored --> <spin-loader style="background:yellow"></spin-loader> </body> </html>edit: bonus answer
if want spin-loaders css properties directly affect styling of little circling divs, here's example implementation:
new css properties for <spin-loader>:
font-sizesize of little circles (default5px)colorcolor of little circles (defaultinherit)- the tag's default size
8em² (defaults40px² iffont-size: 5px)
new implementation for <spin-loader>:
<template id=template-spin-loader> <style> :host { font-size: 5px; width: 8em; height: 8em; display: inline-block; } :host>div { width: 100%; height: 100%; position: relative; } div div { width: 1em; border-top: 1em solid; border-radius: 100%; margin-top: 3em; left: 50%; top: 50%; position: absolute; transform-origin: 0 -3em; opacity: 0; animation: rotate 5s infinite cubic-bezier(0.05, 0.50, 0.94, 0.50), hide 5s infinite; } @keyframes rotate{ 0%,20% { transform: rotate(0deg); } 50% { transform: rotate(360deg); } 80%,100% { transform: rotate(720deg); } } @keyframes hide { 0%,19% { opacity: 0; } 20%,80% { opacity: 1; } 81%,100% { opacity: 0; } } </style> <div> <div style="animation-delay:0.0s;"></div> <div style="animation-delay:0.2s"></div> <div style="animation-delay:0.4s;"></div> <div style="animation-delay:0.6s"></div> <div style="animation-delay:0.8s"></div> </div> </template> <script> var tmpl = document.getelementbyid('template-spin-loader'); var proto = object.create(htmlelement.prototype); proto.createdcallback = function () { var shadow = this.createshadowroot(); shadow.innerhtml = tmpl.innerhtml; }; var spinloader = document.registerelement('spin-loader', { prototype: proto }); </script> <spin-loader style="color: blue; border: 5px solid red; padding: 25px;"></spin-loader> <spin-loader style="color: #fff; background: #000; font-size: 10px"></spin-loader> <spin-loader style="color: yellow; background: red; width: 100px; height: 50px"></spin-loader> <spin-loader></spin-loader>
Comments
Post a Comment