ranui/dist/circle-DZKtMjL0.js

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

import { t as l } from "./rolldown-runtime-BM1aVgqh.js";
import { i } from "./factory-WDxu11V0.js";
import "./builder-EH76YCFS.js";
var o = ".ran-loading .circle{width:var(--loading-circle-width, 4em);height:var(--loading-circle-height, 4em);position:var(--loading-circle-position, relative)}.ran-loading .circle-container{position:var(--loading-circle-container-position, absolute);width:var(--loading-circle-container-width, 100%);height:var(--loading-circle-container-height, 100%)}.ran-loading .circle-container div{width:var(--loading-circle-container-div-width, 1em);height:var(--loading-circle-container-div-height, 1em);background:var(--loading-circle-container-div-background, var(--ran-color-primary, #4096ff));border-radius:var(--loading-circle-container-div-border-radius, 100%);position:var(--loading-circle-container-div-position, absolute);animation:var(--loading-circle-container-div-animation, ran-loading-circle 1.2s infinite ease-in-out);animation-play-state:var(--loading-circle-container-div-animation-play-state, running);animation-fill-mode:var(--loading-circle-container-div-animation-fill-mode, both)}.ran-loading .circle .container1 .circle2{animation-delay:var(--loading-circle-container1-circle2-animation-delay, -.9s)}.ran-loading .circle .container1 .circle3{animation-delay:var(--loading-circle-container1-circle3-animation-delay, -.6s)}.ran-loading .circle .container1 .circle4{animation-delay:var(--loading-circle-container1-circle4-animation-delay, -.3s)}.ran-loading .circle .container2{transform:var(--loading-circle-container2-transform, rotateZ(45deg))}.ran-loading .circle .container2 .circle1{animation-delay:var(--loading-circle-container2-circle1-animation-delay, -1.1s)}.ran-loading .circle .container2 .circle2{animation-delay:var(--loading-circle-container2-circle2-animation-delay, -.8s)}.ran-loading .circle .container2 .circle3{animation-delay:var(--loading-circle-container2-circle3-animation-delay, -.5s)}.ran-loading .circle .container2 .circle4{animation-delay:var(--loading-circle-container2-circle4-animation-delay, -.2s)}.ran-loading .circle .container3{transform:var(--loading-circle-container3-transform, rotateZ(90deg))}.ran-loading .circle .container3 .circle1{animation-delay:var(--loading-circle-container3-circle1-transform, -1s)}.ran-loading .circle .container3 .circle2{animation-delay:var(--loading-circle-container3-circle2-transform, -.7s)}.ran-loading .circle .container3 .circle3{animation-delay:var(--loading-circle-container3-circle3-transform, -.4s)}.ran-loading .circle .container3 .circle4{animation-delay:var(--loading-circle-container3-circle4-transform, -.1s)}.ran-loading .circle .circle1{top:var(--loading-circle1-top, 0);left:var(--loading-circle1-left, 0)}.ran-loading .circle .circle2{top:var(--loading-circle2-top, 0);right:var(--loading-circle2-right, 0)}.ran-loading .circle .circle3{right:var(--loading-circle3-right, 0);bottom:var(--loading-circle3-bottom, 0)}.ran-loading .circle .circle4{left:var(--loading-circle3-left, 0);bottom:var(--loading-circle3-bottom, 0)}@keyframes ran-loading-circle{0%,80%,to{transform:var(--loading-circle-keyframes-0, scale(0))}40%{transform:var(--loading-circle-keyframes-40, scale(1))}}", f = /* @__PURE__ */ l({ default: () => d }), t = () => {
  const a = i().class("circle").part("circle").build();
  return Array(3).fill(1).map(() => Array(4).fill(1)).forEach((r, n) => {
    const c = i().class(`circle-container container${n + 1}`).children(...r.map((g, e) => i().class(`circle${e + 1}`))).build();
    a.appendChild(c);
  }), a;
}, d = {
  css: o,
  render: t
};
export {
  f as n,
  d as t
};