ldrs/dist/react/Grid.js

Tiny HTML and SVG loaders as web components

import{jsx as i,jsxs as d}from"react/jsx-runtime";import{s as a}from"../style-inject.es-BnTDb6vU.js";var t="Grid_container__ekW9c",r="Grid_inner__zjYpA",e="Grid_dot__FYL-R";function o({size:a=60,color:o="black",speed:c=1.5}){return i("div",{className:t,style:{"--uib-size":a+"px","--uib-color":o,"--uib-speed":c+"s"},children:d("div",{className:r,children:[i("div",{className:e}),i("div",{className:e}),i("div",{className:e}),i("div",{className:e}),i("div",{className:e}),i("div",{className:e}),i("div",{className:e}),i("div",{className:e}),i("div",{className:e}),i("div",{className:e}),i("div",{className:e}),i("div",{className:e}),i("div",{className:e}),i("div",{className:e}),i("div",{className:e}),i("div",{className:e})]})})}a('.Grid_container__ekW9c{align-items:center;display:inline-flex;flex-shrink:0;height:calc(var(--uib-size)*.8);justify-content:center;width:var(--uib-size)}.Grid_inner__zjYpA{--uib-dot-size:calc(var(--uib-size)*0.1);height:calc(var(--uib-size)*.64);position:relative;width:calc(var(--uib-size)*.64)}.Grid_dot__FYL-R,.Grid_inner__zjYpA{align-items:center;display:flex;justify-content:flex-start}.Grid_dot__FYL-R{--uib-d1:-0.48;--uib-d2:-0.4;--uib-d3:-0.32;--uib-d4:-0.24;--uib-d5:-0.16;--uib-d6:-0.08;--uib-d7:-0;animation:Grid_jump__M-ok- var(--uib-speed) ease-in-out infinite;backface-visibility:hidden;bottom:calc(var(--uib-bottom) + var(--uib-dot-size)/2);height:var(--uib-dot-size);opacity:var(--uib-scale);position:absolute;right:calc(var(--uib-right) + var(--uib-dot-size)/2);width:var(--uib-dot-size);will-change:transform}.Grid_dot__FYL-R:before{background-color:var(--uib-color);border-radius:50%;content:"";height:100%;transform:scale(var(--uib-scale));transition:background-color .3s ease;width:100%}.Grid_dot__FYL-R:first-child{--uib-bottom:24%;--uib-right:-35%;animation-delay:calc(var(--uib-speed)*var(--uib-d1))}.Grid_dot__FYL-R:nth-child(2){--uib-bottom:16%;--uib-right:-6%;animation-delay:calc(var(--uib-speed)*var(--uib-d2))}.Grid_dot__FYL-R:nth-child(3){--uib-bottom:8%;--uib-right:23%;animation-delay:calc(var(--uib-speed)*var(--uib-d3))}.Grid_dot__FYL-R:nth-child(4){--uib-bottom:-1%;--uib-right:51%;animation-delay:calc(var(--uib-speed)*var(--uib-d4))}.Grid_dot__FYL-R:nth-child(5){--uib-bottom:38%;--uib-right:-17.5%;animation-delay:calc(var(--uib-speed)*var(--uib-d2))}.Grid_dot__FYL-R:nth-child(6){--uib-bottom:30%;--uib-right:10%;animation-delay:calc(var(--uib-speed)*var(--uib-d3))}.Grid_dot__FYL-R:nth-child(7){--uib-bottom:22%;--uib-right:39%;animation-delay:calc(var(--uib-speed)*var(--uib-d4))}.Grid_dot__FYL-R:nth-child(8){--uib-bottom:14%;--uib-right:67%;animation-delay:calc(var(--uib-speed)*var(--uib-d5))}.Grid_dot__FYL-R:nth-child(9){--uib-bottom:53%;--uib-right:-0.8%;animation-delay:calc(var(--uib-speed)*var(--uib-d3))}.Grid_dot__FYL-R:nth-child(10){--uib-bottom:44.5%;--uib-right:27%;animation-delay:calc(var(--uib-speed)*var(--uib-d4))}.Grid_dot__FYL-R:nth-child(11){--uib-bottom:36%;--uib-right:55.7%;animation-delay:calc(var(--uib-speed)*var(--uib-d5))}.Grid_dot__FYL-R:nth-child(12){--uib-bottom:28.7%;--uib-right:84.3%;animation-delay:calc(var(--uib-speed)*var(--uib-d6))}.Grid_dot__FYL-R:nth-child(13){--uib-bottom:66.8%;--uib-right:15%;animation-delay:calc(var(--uib-speed)*var(--uib-d4))}.Grid_dot__FYL-R:nth-child(14){--uib-bottom:58.8%;--uib-right:43%;animation-delay:calc(var(--uib-speed)*var(--uib-d5))}.Grid_dot__FYL-R:nth-child(15){--uib-bottom:50%;--uib-right:72%;animation-delay:calc(var(--uib-speed)*var(--uib-d6))}.Grid_dot__FYL-R:nth-child(16){--uib-bottom:42%;--uib-right:100%;animation-delay:calc(var(--uib-speed)*var(--uib-d7))}.Grid_dot__FYL-R:nth-child(3){--uib-scale:0.98}.Grid_dot__FYL-R:nth-child(2),.Grid_dot__FYL-R:nth-child(8){--uib-scale:0.96}.Grid_dot__FYL-R:first-child,.Grid_dot__FYL-R:nth-child(7){--uib-scale:0.94}.Grid_dot__FYL-R:nth-child(12),.Grid_dot__FYL-R:nth-child(6){--uib-scale:0.92}.Grid_dot__FYL-R:nth-child(11),.Grid_dot__FYL-R:nth-child(5){--uib-scale:0.9}.Grid_dot__FYL-R:nth-child(10),.Grid_dot__FYL-R:nth-child(16){--uib-scale:0.88}.Grid_dot__FYL-R:nth-child(15),.Grid_dot__FYL-R:nth-child(9){--uib-scale:0.86}.Grid_dot__FYL-R:nth-child(14){--uib-scale:0.84}.Grid_dot__FYL-R:nth-child(13){--uib-scale:0.82}@keyframes Grid_jump__M-ok-{0%,to{transform:translateY(120%)}50%{transform:translateY(-120%)}}');export{o as default};
//# sourceMappingURL=Grid.js.map