ldrs/dist/react/Spiral.js

Tiny HTML and SVG loaders as web components

import{jsx as a,jsxs as i}from"react/jsx-runtime";import{s as e}from"../style-inject.es-BnTDb6vU.js";var t="Spiral_container__E05IQ",r="Spiral_inner__3AGof",n="Spiral_dot__uDi0m";function l({size:e=40,color:l="black",speed:o=.9}){return a("div",{className:t,style:{"--uib-size":e+"px","--uib-color":l,"--uib-speed":o+"s"},children:i("div",{className:r,children:[a("div",{className:n}),a("div",{className:n}),a("div",{className:n}),a("div",{className:n}),a("div",{className:n}),a("div",{className:n}),a("div",{className:n}),a("div",{className:n})]})})}e('.Spiral_container__E05IQ{display:inline-flex;flex-shrink:0;justify-content:center}.Spiral_container__E05IQ,.Spiral_inner__3AGof{align-items:center;height:var(--uib-size);width:var(--uib-size)}.Spiral_inner__3AGof{--uib-center:calc(var(--uib-size)/2 - var(--uib-size)/5/2);animation:Spiral_rotate__Jff9S calc(var(--uib-speed)*3) linear infinite;display:flex;justify-content:flex-start;position:relative}.Spiral_dot__uDi0m{align-items:center;display:flex;height:100%;justify-content:flex-start;left:0;position:absolute;top:0;width:100%}.Spiral_dot__uDi0m:before{animation:Spiral_oscillate__4uuZ7 var(--uib-speed) ease-in-out infinite alternate;background-color:var(--uib-color);border-radius:50%;content:"";height:20%;transition:background-color .3s ease;width:20%}.Spiral_dot__uDi0m:first-child:before{transform:translateX(var(--uib-center))}.Spiral_dot__uDi0m:nth-child(2){transform:rotate(45deg)}.Spiral_dot__uDi0m:nth-child(2):before{animation-delay:calc(var(--uib-speed)*-.125);transform:translateX(var(--uib-center))}.Spiral_dot__uDi0m:nth-child(3){transform:rotate(90deg)}.Spiral_dot__uDi0m:nth-child(3):before{animation-delay:calc(var(--uib-speed)*-.25);transform:translateX(var(--uib-center))}.Spiral_dot__uDi0m:nth-child(4){transform:rotate(135deg)}.Spiral_dot__uDi0m:nth-child(4):before{animation-delay:calc(var(--uib-speed)*-.375);transform:translateX(var(--uib-center))}.Spiral_dot__uDi0m:nth-child(5){transform:rotate(180deg)}.Spiral_dot__uDi0m:nth-child(5):before{animation-delay:calc(var(--uib-speed)*-.5);transform:translateX(var(--uib-center))}.Spiral_dot__uDi0m:nth-child(6){transform:rotate(225deg)}.Spiral_dot__uDi0m:nth-child(6):before{animation-delay:calc(var(--uib-speed)*-.625);transform:translateX(var(--uib-center))}.Spiral_dot__uDi0m:nth-child(7){transform:rotate(270deg)}.Spiral_dot__uDi0m:nth-child(7):before{animation-delay:calc(var(--uib-speed)*-.75);transform:translateX(var(--uib-center))}.Spiral_dot__uDi0m:nth-child(8){transform:rotate(315deg)}.Spiral_dot__uDi0m:nth-child(8):before{animation-delay:calc(var(--uib-speed)*-.875);transform:translateX(var(--uib-center))}@keyframes Spiral_oscillate__4uuZ7{0%{opacity:.25;transform:translateX(var(--uib-center)) scale(0)}to{opacity:1;transform:translateX(0) scale(1)}}@keyframes Spiral_rotate__Jff9S{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}');export{l as default};
//# sourceMappingURL=Spiral.js.map