ldrs/dist/react/Hourglass.js

Tiny HTML and SVG loaders as web components

import{jsx as a,jsxs as e}from"react/jsx-runtime";import{s as r}from"../style-inject.es-BnTDb6vU.js";var t="Hourglass_container__e55NZ",s="Hourglass_inner__fXSkJ",i="Hourglass_half__axTa9";function o({size:r=40,color:o="black",speed:l=1.75,bgOpacity:n=.1}){return a("div",{className:t,style:{"--uib-size":r+"px","--uib-color":o,"--uib-speed":l+"s","--uib-bg-opacity":n+""},children:e("div",{className:s,children:[a("div",{className:i}),a("div",{className:i})]})})}r('.Hourglass_container__e55NZ{align-items:center;display:inline-flex;flex-shrink:0;height:var(--uib-size);justify-content:center;width:var(--uib-size)}.Hourglass_inner__fXSkJ{animation:Hourglass_rotate__l3bjj calc(var(--uib-speed)*2) ease-in-out infinite;display:flex;flex-direction:column;height:100%;position:relative;transform:rotate(45deg);width:100%}.Hourglass_half__axTa9{--uib-half-size:calc(var(--uib-size)*0.435);align-items:center;display:flex;height:var(--uib-half-size);isolation:isolate;justify-content:center;overflow:hidden;position:absolute;width:var(--uib-half-size)}.Hourglass_half__axTa9:first-child{border-radius:50% 50% calc(var(--uib-size)/15);left:8.25%;top:8.25%}.Hourglass_half__axTa9:last-child{align-self:flex-end;border-radius:50% 50% calc(var(--uib-size)/15);bottom:8.25%;right:8.25%;transform:rotate(180deg)}.Hourglass_half__axTa9:last-child:after{animation-delay:calc(var(--uib-speed)*-1)}.Hourglass_half__axTa9:before{left:0;opacity:var(--uib-bg-opacity);position:absolute;top:0}.Hourglass_half__axTa9:after,.Hourglass_half__axTa9:before{background-color:var(--uib-color);content:"";height:110%;transition:background-color .3s ease;width:110%}.Hourglass_half__axTa9:after{animation:Hourglass_flow__smVeK calc(var(--uib-speed)*2) linear infinite both;border-radius:0 0 calc(var(--uib-size)/20) 0;display:block;position:relative;transform:rotate(45deg) translate(-3%,50%) scaleX(1.2);transform-origin:bottom right;z-index:1}@keyframes Hourglass_flow__smVeK{0%{transform:rotate(45deg) translate(-3%,50%) scaleX(1.2)}30%{transform:rotate(45deg) translate(115%,50%) scaleX(1.2)}30.001%,50%{transform:rotate(0deg) translate(-85%,-85%) scaleX(1)}80%,to{transform:rotate(0deg) translate(0) scaleX(1)}}@keyframes Hourglass_rotate__l3bjj{0%,30%{transform:rotate(45deg)}50%,80%{transform:rotate(225deg)}to{transform:rotate(405deg)}}');export{o as default};
//# sourceMappingURL=Hourglass.js.map