ldrs/dist/react/Metronome.js

Tiny HTML and SVG loaders as web components

import{jsx as e,jsxs as t}from"react/jsx-runtime";import{s as o}from"../style-inject.es-BnTDb6vU.js";var r="Metronome_container__M43jR",i="Metronome_inner__kUkrF",n="Metronome_dot__T-QQC";function a({size:o=40,color:a="black",speed:s=1.6}){return e("div",{className:r,style:{"--uib-size":o+"px","--uib-color":a,"--uib-speed":s+"s"},children:t("div",{className:i,children:[e("div",{className:n}),e("div",{className:n}),e("div",{className:n}),e("div",{className:n})]})})}o('.Metronome_container__M43jR{align-items:center;display:inline-flex;flex-shrink:0;height:calc(var(--uib-size)*.63);justify-content:center;width:var(--uib-size)}.Metronome_inner__kUkrF{height:var(--uib-size);position:relative;top:8%;width:var(--uib-size)}.Metronome_dot__T-QQC,.Metronome_inner__kUkrF{align-items:center;display:flex;justify-content:flex-start}.Metronome_dot__T-QQC{animation:Metronome_swing__t9b9o var(--uib-speed) linear infinite;height:100%;left:0;position:absolute;top:13.5%;width:100%}.Metronome_dot__T-QQC:before{background-color:var(--uib-color);border-radius:50%;content:"";height:25%;transition:background-color .3s ease;width:25%}.Metronome_dot__T-QQC:first-child{animation-delay:calc(var(--uib-speed)*-.36)}.Metronome_dot__T-QQC:nth-child(2){animation-delay:calc(var(--uib-speed)*-.27);opacity:.8}.Metronome_dot__T-QQC:nth-child(2):before{transform:scale(.9)}.Metronome_dot__T-QQC:nth-child(3){animation-delay:calc(var(--uib-speed)*-.18);opacity:.6}.Metronome_dot__T-QQC:nth-child(3):before{transform:scale(.8)}.Metronome_dot__T-QQC:nth-child(4){animation-delay:calc(var(--uib-speed)*-.09);opacity:.4}.Metronome_dot__T-QQC:nth-child(4):before{transform:scale(.7)}@keyframes Metronome_swing__t9b9o{0%{transform:rotate(0deg)}15%{transform:rotate(0deg)}50%{transform:rotate(180deg)}65%{transform:rotate(180deg)}to{transform:rotate(0deg)}}');export{a as default};
//# sourceMappingURL=Metronome.js.map