ldrs
Version:
Tiny HTML and SVG loaders as web components
3 lines (2 loc) • 1.83 kB
JavaScript
import{jsx as e,jsxs as i}from"react/jsx-runtime";import{s as t}from"../style-inject.es-BnTDb6vU.js";var n="NewtonsCradle_container__hk3Nx",a="NewtonsCradle_inner__cPGX3",r="NewtonsCradle_dot__r6v9-";function o({size:t=78,color:o="black",speed:s=1.4}){return e("div",{className:n,style:{"--uib-size":t+"px","--uib-color":o,"--uib-speed":s+"s"},children:i("div",{className:a,children:[e("div",{className:r}),e("div",{className:r}),e("div",{className:r}),e("div",{className:r})]})})}t('.NewtonsCradle_container__hk3Nx{align-items:center;display:inline-flex;flex-shrink:0;height:calc(var(--uib-size)*.3);justify-content:center;width:var(--uib-size)}.NewtonsCradle_inner__cPGX3{align-items:center;display:flex;height:calc(var(--uib-size)*.51);justify-content:center;position:relative;top:28%;width:51%}.NewtonsCradle_dot__r6v9-{align-items:center;display:flex;flex-shrink:0;height:100%;position:relative;transform-origin:center top;width:25%}.NewtonsCradle_dot__r6v9-:after{background-color:var(--uib-color);border-radius:50%;content:"";display:block;height:25%;transition:background-color .3s ease;width:100%}.NewtonsCradle_dot__r6v9-:first-child{animation:NewtonsCradle_swing__yVL8F var(--uib-speed) linear infinite}.NewtonsCradle_dot__r6v9-:last-child{animation:NewtonsCradle_swing2__DTIF5 var(--uib-speed) linear infinite}@keyframes NewtonsCradle_swing__yVL8F{0%{animation-timing-function:ease-out;transform:rotate(0deg)}25%{animation-timing-function:ease-in;transform:rotate(70deg)}50%{animation-timing-function:linear;transform:rotate(0deg)}}@keyframes NewtonsCradle_swing2__DTIF5{0%{animation-timing-function:linear;transform:rotate(0deg)}50%{animation-timing-function:ease-out;transform:rotate(0deg)}75%{animation-timing-function:ease-in;transform:rotate(-70deg)}}');export{o as default};
//# sourceMappingURL=NewtonsCradle.js.map