ranui/dist/dot-circle-DDXNGDIk.cjs

A framework-agnostic Web Components UI library built on native custom elements, with TypeScript types, light/dark theming, SSR and PWA support.

const a=require("./builder-Cb6jFd2B.cjs");var t=".ran-loading .dot-circle-item{background-color:var(--loading-dot-circle-item-background-color, #f00);background-image:var(--loading-dot-circle-item-background-image, linear-gradient(90deg, #f00 25%, #ff9999));width:var(--loading-dot-circle-item-width, 3px);height:var(--loading-dot-circle-item-height, 3px);border-radius:var(--loading-dot-circle-item-border-radius, 50%);box-shadow:var(--loading-dot-circle-item-box-shadow, 0 0 5px #cc0000);margin:var(--loading-dot-circle-item-margin, 0 auto);position:var(--loading-dot-circle-item-position, relative);animation:var(--loading-dot-circle-item-animation, dot-circle 2s infinite cubic-bezier(0, 0, .35, 1) normal)}.ran-loading .dot-circle-item-1{animation-play-state:var(--loading-dot-circle-item-1-animation-play-state, running);animation-delay:var(--loading-dot-circle-item-1-animation-delay, 0)}.ran-loading .dot-circle-item-2{opacity:var(--loading-dot-circle-item-2-opacity, .7);top:var(--loading-dot-circle-item-2-top, 1px);animation-play-state:var(--loading-dot-circle-item-2-animation-play-state, running);animation-delay:var(--loading-dot-circle-item-2-animation-delay, .1s)}.ran-loading .dot-circle-item-3{opacity:var(--loading-dot-circle-item-3-opacity, .5);top:var(--loading-dot-circle-item-3-top, 2px);animation-play-state:var(--loading-dot-circle-item-3-animation-play-state, running);animation-delay:var(--loading-dot-circle-item-3-animation-delay, .2s)}.ran-loading .dot-circle-item-4{opacity:var(--loading-dot-circle-item-4-opacity, .3);top:var(--loading-dot-circle-item-4-top, 3px);animation-play-state:var(--loading-dot-circle-item-4-animation-play-state, running);animation-delay:var(--loading-dot-circle-item-4-animation-delay, .3s)}.ran-loading .dot-circle-item-5{opacity:var(--loading-dot-circle-item-5-opacity, .1);top:var(--loading-dot-circle-item-5-top, 4px);animation-play-state:var(--loading-dot-circle-item-5-animation-play-state, running);animation-delay:var(--loading-dot-circle-item-5-animation-delay, .4s)}@keyframes dot-circle{0%{transform:var(--loading-dot-circle-keyframes-from-transform, translateX(0px))}25%{transform:var(--loading-dot-circle-keyframes-25-transform, translateX(25px));animation-timing-function:ease-in}50%{transform:var(--loading-dot-circle-keyframes-50-transform, translateX(0px))}75%{transform:var(--loading-dot-circle-keyframes-75-transform, translateX(-25px));animation-timing-function:ease-in}to{transform:var(--loading-dot-circle-keyframes-to-transform, translateX(0px))}}",o=()=>a.Div().class("dot-circle").part("dot-circle").children(...Array(5).fill(1).map((e,i)=>a.Div().class(`dot-circle-item dot-circle-item-${i+1}`))).build(),r={css:t,render:o};exports.default=r;