ranui/dist/dot-line-Dc17eMQU.js

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

import { i } from "./factory-WDxu11V0.js";
import "./builder-EH76YCFS.js";
var e = '.ran-loading .dot-line{width:var(--loading-dot-line-width, 20em);height:var(--loading-dot-line-height, 20em);font-size:var(--loading-dot-line-font-size, 10px);position:var(--loading-dot-line-position, relative);display:var(--loading-dot-line-display, flex);align-items:var(--loading-dot-line-align-items, center);justify-content:var(--loading-dot-line-justify-content, center)}@keyframes dot-line{to{transform:var(--loading-dot-line-keyframes-to-transform, rotate(1turn))}}.ran-loading .dot-line-item{position:var(--loading-dot-line-item-position, absolute);border-radius:var(--loading-dot-line-item-border-radius, 50%);border-style:var(--loading-dot-line-item-order-style, solid);animation:var(--loading-dot-line-item-animation, dot-line 3s linear infinite);animation-play-state:var(--loading-dot-line-item-animation-play-state, running)}.ran-loading .dot-line-item:nth-child(1){width:var(--loading-dot-line-item-nth-child-1-width, 100%);height:var(--loading-dot-line-item-nth-child-1-height, 100%);color:var(--loading-dot-line-item-nth-child-1-color, gold);border-color:var(--loading-dot-line-item-nth-child-1-border-color, currentColor transparent transparent currentColor);border-width:var(--loading-dot-line-item-nth-child-1-border-width, .2em .2em 0em 0em);--deg: var(--loading-dot-line-item-nth-child-1-deg, -45deg);animation-direction:var(--loading-dot-line-item-nth-child-1-animation-direction, normal)}.ran-loading .dot-line-item:nth-child(2){width:var(--loading-dot-line-item-nth-child-2-width, 70%);height:var(--loading-dot-line-item-nth-child-2-height, 70%);color:var(--loading-dot-line-item-nth-child-2-color, lime);border-color:var(--loading-dot-line-item-nth-child-2-border-color, currentColor currentColor transparent transparent);border-width:var(--loading-dot-line-item-nth-child-2-border-width, .2em 0em 0em .2em);--deg: var(--loading-dot-line-item-nth-child-2-deg, -135deg);animation-direction:var(--loading-dot-line-item-nth-child-2-animation-direction, reverse)}.ran-loading .dot-line-item-circle{position:var(--loading-dot-line-item-circle-position, absolute);width:var(--loading-dot-line-item-circle-width, 50%);height:var(--loading-dot-line-item-circle-height, .1em);top:var(--loading-dot-line-item-circle-top, 50%);left:var(--loading-dot-line-item-circle-left, 50%);background-color:var(--loading-dot-line-item-circle-background-color, transparent);transform:rotate(var(--deg));transform-origin:var(--loading-dot-line-item-circle-transform-origin, left)}.ran-loading .dot-line-item-circle:before{position:var(--loading-dot-line-item-circle-before-position, absolute);top:var(--loading-dot-line-item-circle-before-top, -.5em);right:var(--loading-dot-line-item-circle-before-right, -.5em);content:var(--loading-dot-line-item-circle-before-content, "");width:var(--loading-dot-line-item-circle-before-width, 1em);height:var(--loading-dot-line-item-circle-before-height, 1em);background-color:var(--loading-dot-line-item-circle-before-background-color, currentColor);border-radius:var(--loading-dot-line-item-circle-before-border-radius, 50%);box-shadow:var(--loading-dot-line-item-circle-before-box-shadow, 0 0 2em, 0 0 4em, 0 0 6em, 0 0 8em, 0 0 10em, 0 0 0 .5em rgba(255, 255, 0, .1))}', o = () => i().class("dot-line").part("dot-line").children(...Array(2).fill(1).map(() => i().class("dot-line-item").children(i().class("dot-line-item-circle")))).build(), r = {
  css: e,
  render: o
};
export {
  r as default
};