ldrs/dist/react/DotWave.js

Tiny HTML and SVG loaders as web components

import{jsx as e,jsxs as i}from"react/jsx-runtime";import{s as a}from"../style-inject.es-BnTDb6vU.js";var t="DotWave_container__lklTB",n="DotWave_inner__-X5-1",s="DotWave_dot__sB08q";function o({size:a=47,color:o="black",speed:r=1}){return e("div",{className:t,style:{"--uib-size":a+"px","--uib-color":o,"--uib-speed":r+"s"},children:i("div",{className:n,children:[e("div",{className:s}),e("div",{className:s}),e("div",{className:s}),e("div",{className:s})]})})}a(".DotWave_container__lklTB{align-items:center;display:inline-flex;flex-shrink:0;height:calc(var(--uib-size)*.5);justify-content:center;width:var(--uib-size)}.DotWave_inner__-X5-1{align-items:flex-end;display:flex;height:100%;justify-content:space-between;width:100%}.DotWave_dot__sB08q{background-color:var(--uib-color);border-radius:50%;flex-shrink:0;height:calc(var(--uib-size)*.17);transition:background-color .3s ease;width:calc(var(--uib-size)*.17)}.DotWave_dot__sB08q:first-child{animation:DotWave_jump__pw4cn var(--uib-speed) ease-in-out calc(var(--uib-speed)*-.45) infinite}.DotWave_dot__sB08q:nth-child(2){animation:DotWave_jump__pw4cn var(--uib-speed) ease-in-out calc(var(--uib-speed)*-.3) infinite}.DotWave_dot__sB08q:nth-child(3){animation:DotWave_jump__pw4cn var(--uib-speed) ease-in-out calc(var(--uib-speed)*-.15) infinite}.DotWave_dot__sB08q:nth-child(4){animation:DotWave_jump__pw4cn var(--uib-speed) ease-in-out infinite}@keyframes DotWave_jump__pw4cn{0%,to{transform:translateY(0)}50%{transform:translateY(-200%)}}");export{o as default};
//# sourceMappingURL=DotWave.js.map