ldrs/dist/react/BouncyArc.js

Tiny HTML and SVG loaders as web components

import{jsx as r}from"react/jsx-runtime";import{s as e}from"../style-inject.es-BnTDb6vU.js";var i="BouncyArc_container__iR3Nh",n="BouncyArc_inner__5w9mZ",t="BouncyArc_cube__0SI24";function a({size:e=70,color:a="black",speed:o=1.65}){return r("div",{className:i,style:{"--uib-size":e+"px","--uib-color":a,"--uib-speed":o+"s"},children:r("div",{className:n,children:r("div",{className:t})})})}e('.BouncyArc_container__iR3Nh{align-items:center;display:inline-flex;flex-shrink:0;height:calc(var(--uib-size)*.51);justify-content:center;width:var(--uib-size)}.BouncyArc_inner__5w9mZ{--uib-cube-size:calc(var(--uib-size)/5.5);--uib-arc-1:-80deg;--uib-arc-2:80deg;align-items:flex-start;display:flex;height:100%;justify-content:center;width:100%}.BouncyArc_cube__0SI24{animation:BouncyArc_metronome__JsFWs var(--uib-speed) linear infinite;height:calc(var(--uib-size)*.5);transform:rotate(var(var(--uib-arc-1)));transform-origin:center bottom;width:var(--uib-cube-size)}.BouncyArc_cube__0SI24:after{animation:BouncyArc_morph__GodWb var(--uib-speed) linear infinite;background-color:var(--uib-color);border-radius:25%;content:"";display:block;height:var(--uib-cube-size);transition:background-color .3s ease;width:var(--uib-cube-size)}@keyframes BouncyArc_metronome__JsFWs{0%{transform:rotate(var(--uib-arc-1))}10%{animation-timing-function:ease-out;transform:rotate(var(--uib-arc-1))}50%{transform:rotate(var(--uib-arc-2))}60%{animation-timing-function:ease-out;transform:rotate(var(--uib-arc-2))}to{transform:rotate(var(--uib-arc-1))}}@keyframes BouncyArc_morph__GodWb{0%,5%{transform:scaleX(.75) scaleY(1.25);transform-origin:center left}12.5%{transform:scaleX(1.5);transform-origin:center left}27.5%{transform:scaleX(1);transform-origin:center left}27.5001%,42.5%{transform:scaleX(1);transform-origin:center right}47.5%{animation-timing-function:ease-in;transform:scaleX(.75) scaleY(1.25);transform-origin:center right}65%{transform:scaleX(1.5);transform-origin:center right}77.5%{transform:scaleX(1);transform-origin:center right}77.5001%,95%{transform:scaleX(1);transform-origin:center left}to{transform:scaleX(.75) scaleY(1.25);transform-origin:center left}}');export{a as default};
//# sourceMappingURL=BouncyArc.js.map