UNPKG

ranui

Version:

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

10 lines (9 loc) 4.09 kB
import { i } from "./factory-WDxu11V0.js"; import "./builder-EH76YCFS.js"; var e = '.ran-loading .circle-fold{width:var(--loading-circle-fold-width, 4em);height:var(--loading-circle-fold-height, 4em);position:var(--loading-circle-fold-position, relative);margin:var(--loading-circle-fold-margin, auto)}@keyframes circle-fold{0%,39%,to{opacity:var(--loading-circle-fold-keyframes-0-opacity, 0)}40%{opacity:var(--loading-circle-fold-keyframes-40-opacity, 1)}}.ran-loading .circle-fold-item{width:var(--loading-circle-fold-item-width, 100%);height:var(--loading-circle-fold-item-height, 100%);position:var(--loading-circle-fold-item-position, absolute);left:var(--loading-circle-fold-item-left, 0);top:var(--loading-circle-fold-item-top, 0)}.ran-loading .circle-fold-item:before{content:var(--loading-circle-fold-item-before-content, " ");display:var(--loading-circle-fold-item-before-display, block);margin:var(--loading-circle-fold-item-before-margin, 0 auto);width:var(--loading-circle-fold-item-before-width, 15%);height:var(--loading-circle-fold-item-before-height, 15%);background:var(--loading-circle-fold-item-before-background, #337ab7);border-radius:var(--loading-circle-fold-item-before-border-radius, 100%);animation:var(--loading-circle-fold-item-before-animation, circle-fold 1.2s infinite ease-in-out both);animation-play-state:var(--loading-circle-fold-item-before-animation-play-state, running)}.ran-loading .circle-fold-item-2{transform:var(--loading-circle-fold-item-2-transform, rotate(30deg))}.ran-loading .circle-fold-item-2:before{animation-delay:var(--loading-circle-fold-item-2-before-animation-delay, -1.1s)}.ran-loading .circle-fold-item-3{transform:var(--loading-circle-fold-item-3-transform, rotate(60deg))}.ran-loading .circle-fold-item-3:before{animation-delay:var(--loading-circle-fold-item-3-before-animation-delay, -1s)}.ran-loading .circle-fold-item-4{transform:var(--loading-circle-fold-item-4-transform, rotate(90deg))}.ran-loading .circle-fold-item-4:before{animation-delay:var(--loading-circle-fold-item-4-before-animation-delay, -.9s)}.ran-loading .circle-fold-item-5{transform:var(--loading-circle-fold-item-5-transform, rotate(120deg))}.ran-loading .circle-fold-item-5:before{animation-delay:var(--loading-circle-fold-item-5-before-animation-delay, -.8s)}.ran-loading .circle-fold-item-6{transform:var(--loading-circle-fold-item-6-transform, rotate(150deg))}.ran-loading .circle-fold-item-6:before{animation-delay:var(--loading-circle-fold-item-6-before-animation-delay, -.7s)}.ran-loading .circle-fold-item-7{transform:var(--loading-circle-fold-item-7-transform, rotate(180deg))}.ran-loading .circle-fold-item-7:before{animation-delay:var(--loading-circle-fold-item-7-before-animation-delay, -.6s)}.ran-loading .circle-fold-item-8{transform:var(--loading-circle-fold-item-8-transform, rotate(210deg))}.ran-loading .circle-fold-item-8:before{animation-delay:var(--loading-circle-fold-item-8-before-animation-delay, -.5s)}.ran-loading .circle-fold-item-9{transform:var(--loading-circle-fold-item-9-transform, rotate(240deg))}.ran-loading .circle-fold-item-9:before{animation-delay:var(--loading-circle-fold-item-9-before-animation-delay, -.4s)}.ran-loading .circle-fold-item-10{transform:var(--loading-circle-fold-item-10-transform, rotate(270deg))}.ran-loading .circle-fold-item-10:before{animation-delay:var(--loading-circle-fold-item-10-before-animation-delay, -.3s)}.ran-loading .circle-fold-item-11{transform:var(--loading-circle-fold-item-11-transform, rotate(300deg))}.ran-loading .circle-fold-item-11:before{animation-delay:var(--loading-circle-fold-item-11-before-animation-delay, -.2s)}.ran-loading .circle-fold-item-12{transform:var(--loading-circle-fold-item-12-transform, rotate(330deg))}.ran-loading .circle-fold-item-12:before{animation-delay:var(--loading-circle-fold-item-12-before-animation-delay, -.1s)}', o = () => i().class("circle-fold").part("circle-fold").children(...Array(12).fill(1).map((r, a) => i().class(`circle-fold-item circle-fold-item-${a + 1}`))).build(), n = { css: e, render: o }; export { n as default };