ranui/dist/dot-pulse-CYeqwG5l.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 as a } from "./factory-WDxu11V0.js";
import "./builder-EH76YCFS.js";
var l = ".ran-loading .dot-pulse{width:var(--loading-dot-pulse-width, 48px);padding:var(--loading-dot-pulse-padding, 8px 5px);margin:var(--loading-dot-pulse-margin, 30px auto);overflow:var(--loading-dot-pulse-overflow, hidden)}@keyframes dot-pulse{0%{transform:var(--loading-dot-pulse-keyframes-from, scale(0))}to{transform:var(--loading-dot-pulse-keyframes-to, scale(1))}}@keyframes dot-pulse-glow{0%{transform:var(--loading-dot-pulse-keyframes-glow-from-transform, scale(0));opacity:var(--loading-dot-pulse-keyframes-glow-from-opacity, 0)}10%{transform:var(--loading-dot-pulse-keyframes-glow-10-transform, scale(1));opacity:var(--loading-dot-pulse-keyframes-glow-10-opacity, .5)}50%{transform:var(--loading-dot-pulse-keyframes-glow-50-transform, scale(1.75));opacity:var(--loading-dot-pulse-keyframes-glow-50-opacity, 0)}to{transform:var(--loading-dot-pulse-keyframes-glow-to-transform, scale(0));opacity:var(--loading-dot-pulse-keyframes-glow-to-opacity, 0)}}.ran-loading .dot-pulse-item{float:var(--loading-dot-pulse-item-float, left);position:var(--loading-dot-pulse-item-position, relative);width:var(--loading-dot-pulse-item-width, 6px);height:var(--loading-dot-pulse-item-height, 6px);border-radius:var(--loading-dot-pulse-item-border-radius, 50px);margin-left:var(--loading-dot-pulse-item-margin-left, 2px)}.ran-loading .dot-pulse-item:first-child{margin-left:var(--loading-dot-pulse-item-first-child-margin-left, 0)}.ran-loading .dot-pulse-item-dot{background-color:var(--loading-dot-pulse-item-dot-background-color, #2187e7);background-image:var(--loading-dot-pulse-item-dot-background-image, linear-gradient(90deg, #2187e7 25%, #a0eaff));width:var(--loading-dot-pulse-item-dot-width, 6px);height:var(--loading-dot-pulse-item-dot-height, 6px);border-radius:var(--loading-dot-pulse-item-dot-border-radius, 50px);transform:var(--loading-dot-pulse-item-dot-transform, scale(0));animation:var(--loading-dot-pulse-item-dot-animation, dot-pulse 1s linear forwards normal);animation-play-state:var(--loading-dot-pulse-item-dot-animation-play-state, running);animation-delay:var(--loading-dot-pulse-item-dot-animation-delay, 0)}.ran-loading .dot-pulse-item-dot-1{animation-delay:var(--loading-dot-pulse-item-dot-1-animation-delay, .5s)}.ran-loading .dot-pulse-item-dot-2{animation-delay:var(--loading-dot-pulse-item-dot-2-animation-delay, 1s)}.ran-loading .dot-pulse-item-dot-3{animation-delay:var(--loading-dot-pulse-item-dot-3-animation-delay, 1.5s)}.ran-loading .dot-pulse-item-dot-4{animation-delay:var(--loading-dot-pulse-item-dot-4-animation-delay, 2s)}.ran-loading .dot-pulse-item-dot-5{animation-delay:var(--loading-dot-pulse-item-dot-5-animation-delay, 2.5s)}.ran-loading .dot-pulse-item-ball{width:var(--loading-dot-pulse-item-ball-width, 6px);height:var(--loading-dot-pulse-item-ball-height, 6px);border-radius:var(--loading-dot-pulse-item-ball-border-radius, 30px);border:var(--loading-dot-pulse-item-ball-border, 1px solid #00c6ff);box-shadow:var(--loading-dot-pulse-item-ball-box-shadow, 0 0 5px #00c6ff);position:var(--loading-dot-pulse-item-ball-position, absolute);top:var(--loading-dot-pulse-item-ball-top, -1px);left:var(--loading-dot-pulse-item-ball-left, -1px);transform:var(--loading-dot-pulse-item-ball-transform, scale(0));animation:var(--loading-dot-pulse-item-ball-animation, dot-pulse-glow 3s infinite ease-out normal);animation-play-state:var(--loading-dot-pulse-item-ball-animation-play-state, running);animation-delay:var(--loading-dot-pulse-item-ball-animation-delay, 0)}.ran-loading .dot-pulse-item-ball-1{animation-delay:var(--loading-dot-pulse-item-ball-1-animation-delay, 1.5s)}.ran-loading .dot-pulse-item-ball-2{animation-delay:var(--loading-dot-pulse-item-ball-2-animation-delay, 2s)}.ran-loading .dot-pulse-item-ball-3{animation-delay:var(--loading-dot-pulse-item-ball-3-animation-delay, 2.5s)}.ran-loading .dot-pulse-item-ball-4{animation-delay:var(--loading-dot-pulse-item-ball-4-animation-delay, 3s)}.ran-loading .dot-pulse-item-ball-5{animation-delay:var(--loading-dot-pulse-item-ball-5-animation-delay, 3.5s)}", t = () => a().class("dot-pulse").part("dot-pulse").children(...Array(5).fill(1).map((i, o) => a().class("dot-pulse-item").children(a().class(`dot-pulse-item-dot dot-pulse-item-dot-${o + 1}`), a().class(`dot-pulse-item-ball dot-pulse-item-ball-${o + 1}`)))).build(), n = {
  css: l,
  render: t
};
export {
  n as default
};