ldrs/dist/react/Trio.js

Tiny HTML and SVG loaders as web components

import{jsx as i,jsxs as e}from"react/jsx-runtime";import{s as t}from"../style-inject.es-BnTDb6vU.js";var r="Trio_container__1LmG6",o="Trio_inner__k7B37",a="Trio_dot__GVz6a";function n({size:t=40,color:n="black",speed:s=1.3}){return i("div",{className:r,style:{"--uib-size":t+"px","--uib-color":n,"--uib-speed":s+"s"},children:e("div",{className:o,children:[i("div",{className:a}),i("div",{className:a}),i("div",{className:a})]})})}t('.Trio_container__1LmG6{align-items:center;display:inline-flex;flex-shrink:0;justify-content:center}.Trio_container__1LmG6,.Trio_inner__k7B37{height:var(--uib-size);width:var(--uib-size)}.Trio_inner__k7B37{--uib-dot-size:25%;animation:Trio_spin__ex4vU var(--uib-speed) infinite linear;display:inline-block;position:relative}.Trio_dot__GVz6a{height:100%;left:calc(50% - var(--uib-dot-size)/2);position:absolute;width:var(--uib-dot-size)}.Trio_dot__GVz6a:after{background-color:var(--uib-color);border-radius:50%;content:"";height:0;left:0;padding-bottom:100%;position:absolute;top:0;transition:background-color .3s ease;width:100%}.Trio_dot__GVz6a:first-child{transform:rotate(120deg)}.Trio_dot__GVz6a:first-child:after{animation:Trio_wobble__qnMEk var(--uib-speed) infinite ease-in-out}.Trio_dot__GVz6a:nth-child(2){transform:rotate(-120deg)}.Trio_dot__GVz6a:nth-child(2):after,.Trio_dot__GVz6a:nth-child(3):after{animation:Trio_wobble__qnMEk var(--uib-speed) infinite ease-in-out}@keyframes Trio_spin__ex4vU{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}@keyframes Trio_wobble__qnMEk{0%,to{transform:translateY(0)}50%{transform:translateY(65%)}}');export{n as default};
//# sourceMappingURL=Trio.js.map