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.

2 lines (1 loc) 2.67 kB
const e=require("./builder-Cb6jFd2B.cjs");var o='.ran-loading .cube-fold{width:var(--loading-cube-fold-width, 4em);height:var(--loading-cube-fold-height, 4em);position:var(--loading-cube-fold-position, relative);margin:var(--loading-cube-fold-margin, auto);transform:var(--loading-cube-fold-transform, rotateZ(45deg))}@keyframes cube-fold{0%,10%{transform:var(--loading-cube-fold-keyframes-0-transform, perspective(140px) rotateX(-180deg));opacity:var(--loading-cube-fold-keyframes-0-opacity, 0)}25%,75%{transform:var(--loading-cube-fold-keyframes-25-transform, perspective(140px) rotateX(0deg));opacity:var(--loading-cube-fold-keyframes-25-opacity, 1)}90%,to{transform:var(--loading-cube-fold-keyframes-90-transform, perspective(140px) rotateY(180deg));opacity:var(--loading-cube-fold-keyframes-90-opacity, 0)}}.ran-loading .cube-fold-item{float:var(--loading-cube-fold-item-float, left);width:var(--loading-cube-fold-item-width, 50%);height:var(--loading-cube-fold-item-height, 50%);position:var(--loading-cube-fold-item-position, relative);transform:var(--loading-cube-fold-item-transform, scale(1.1))}.ran-loading .cube-fold-item:before{content:var(--loading-cube-fold-item-before-content, " ");position:var(--loading-cube-fold-item-before-position, absolute);top:var(--loading-cube-fold-item-before-top, 0);left:var(--loading-cube-fold-item-before-left, 0);width:var(--loading-cube-fold-item-before-width, 100%);height:var(--loading-cube-fold-item-before-height, 100%);background:var(--loading-cube-fold-item-before-background, #337ab7);animation:var(--loading-cube-fold-item-before-animation, cube-fold 2.4s infinite linear both);animation-play-state:var(--loading-cube-fold-item-before-animation-play-state, running);transform-origin:var(--loading-cube-fold-item-before-transform-origin, 100% 100%)}.ran-loading .cube-fold-item-2{transform:var(--loading-cube-fold-item-2-transform, scale(1.1) rotateZ(90deg))}.ran-loading .cube-fold-item-2:before{animation-delay:var(--loading-cube-fold-item-2-before-animation-delay, .3s)}.ran-loading .cube-fold-item-3{transform:var(--loading-cube-fold-item-3-transform, scale(1.1) rotateZ(270deg))}.ran-loading .cube-fold-item-3:before{animation-delay:var(--loading-cube-fold-item-3-before-animation-delay, .9s)}.ran-loading .cube-fold-item-4{transform:var(--loading-cube-fold-item-4-transform, scale(1.1) rotateZ(180deg))}.ran-loading .cube-fold-item-4:before{animation-delay:var(--loading-cube-fold-item-4-before-animation-delay, .6s)}',i=()=>e.Div().class("cube-fold").part("cube-fold").children(...Array(4).fill(1).map((t,a)=>e.Div().class(`cube-fold-item cube-fold-item-${a+1}`))).build(),r={css:o,render:i};exports.default=r;