1 line
2.8 KiB
JavaScript
1 line
2.8 KiB
JavaScript
const cubeLoader=document.createElement("template");cubeLoader.innerHTML='\n <style>\n :host{\n --gap: 0.1rem;\n --size: 1.5rem;\n --color: var(--accent-color,teal);\n }\n .loader {\n display: grid;\n width: max-content;\n grid-template-columns: auto auto;\n gap: var(--gap);\n }\n .box {\n border-radius: 0.2rem;\n height: var(--size);\n width: var(--size);\n background-color: var(--color);\n animation-duration: 2s;\n animation-iteration-count: infinite;\n animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);\n }\n .box:nth-of-type(1) {\n animation-name: move1;\n }\n .box:nth-of-type(2) {\n animation-name: move2;\n }\n .box:nth-of-type(3) {\n animation-name: move3;\n }\n @keyframes move1 {\n 0% {\n transform: translate(0, 0);\n }\n 25% {\n transform: translate(calc(100% + var(--gap)), 0);\n }\n 50% {\n transform: translate(calc(100% + var(--gap)), calc(100% + var(--gap)));\n }\n 75% {\n transform: translate(0, calc(100% + var(--gap)));\n }\n 100% {\n transform: translate(0, 0);\n }\n }\n @keyframes move2 {\n 0% {\n transform: translate(0, 0);\n }\n 25% {\n transform: translate(0, calc(100% + var(--gap)));\n }\n 50% {\n transform: translate(calc(-100% - var(--gap)), calc(100% + var(--gap)));\n }\n 75% {\n transform: translate(calc(-100% - var(--gap)), 0);\n }\n 100% {\n transform: translate(0, 0);\n }\n }\n @keyframes move3 {\n 0% {\n transform: translate(0, 0);\n }\n 25% {\n transform: translate(0, calc(-100% - var(--gap)));\n }\n 50% {\n transform: translate(calc(100% + var(--gap)), calc(-100% - var(--gap)));\n }\n 75% {\n transform: translate(calc(100% + var(--gap)), 0);\n }\n 100% {\n transform: translate(0, 0);\n }\n }\n </style>\n <div class="loader">\n <div class="box"></div>\n <div class="box"></div>\n <div class="box"></div>\n </div> \n';class CubeLoader extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(cubeLoader.content.cloneNode(!0))}}window.customElements.define("cube-loader",CubeLoader); |