UNPKG

@lobehub/ui

Version:

Lobe UI is an open-source UI component library for building AIGC web apps

github.com/lobehub/lobe-ui

lobehub/lobe-ui

1 lines • 4.1 kB
1
{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/base-ui/Spin/style.ts"],"sourcesContent":["import { createStaticStyles, keyframes } from 'antd-style';\n\nconst nodePulse = keyframes`\n 0%, 100% {\n opacity: 0.3;\n }\n 50% {\n opacity: 1;\n }\n`;\n\nconst particleFlow = keyframes`\n 0% {\n transform: translateX(0);\n opacity: 0.5;\n }\n 50% {\n opacity: 1;\n }\n 100% {\n transform: translateX(50px);\n opacity: 0.5;\n }\n`;\n\nconst coreBreath = keyframes`\n 0%, 100% {\n transform: scale(0.8);\n opacity: 0.5;\n }\n 50% {\n transform: scale(1);\n opacity: 1;\n }\n`;\n\nconst ringSpin = keyframes`\n to {\n transform: rotate(360deg);\n }\n`;\n\nconst reducedMotion = `\n @media (prefers-reduced-motion: reduce) {\n animation: none;\n }\n`;\n\nexport const styles = createStaticStyles(({ css, cssVar }) => ({\n glyph: css`\n display: inline-flex;\n `,\n glyphBox: css`\n display: inline-flex;\n `,\n network: css`\n position: relative;\n display: inline-block;\n `,\n networkBox: css`\n position: absolute;\n inset-block-start: 0;\n inset-inline-start: 0;\n transform-origin: 0 0;\n\n width: 100px;\n height: 100px;\n `,\n networkCore: css`\n position: absolute;\n inset-block-start: 47px;\n inset-inline-start: 47px;\n\n width: 6px;\n height: 6px;\n\n background: currentcolor;\n\n animation: ${coreBreath} 2s infinite;\n ${reducedMotion}\n `,\n networkLines: css`\n position: absolute;\n inset: 0;\n width: 100px;\n height: 100px;\n\n line {\n opacity: 0.3;\n stroke: currentcolor;\n stroke-width: 0.5;\n }\n `,\n networkNode: css`\n position: absolute;\n\n margin: calc(var(--spin-node-size) / -2);\n border-radius: 50%;\n width: var(--spin-node-size);\n height: var(--spin-node-size);\n\n background: currentcolor;\n\n animation: ${nodePulse} 2s infinite;\n ${reducedMotion}\n `,\n networkParticle: css`\n position: absolute;\n inset-block-start: 50px;\n inset-inline-start: 25px;\n\n margin: calc(var(--spin-particle-size) / -2);\n border-radius: 50%;\n width: var(--spin-particle-size);\n height: var(--spin-particle-size);\n\n background: currentcolor;\n\n animation: ${particleFlow} 2s infinite;\n ${reducedMotion}\n `,\n networkRing: css`\n position: absolute;\n inset: 10px;\n\n border: 1px dashed currentcolor;\n border-radius: 50%;\n\n opacity: 0.4;\n\n animation: ${ringSpin} 20s linear infinite;\n ${reducedMotion}\n `,\n overlay: css`\n position: absolute;\n inset: 0;\n\n display: flex;\n flex-direction: column;\n gap: 8px;\n align-items: center;\n justify-content: center;\n\n color: ${cssVar.colorTextSecondary};\n\n background: color-mix(in srgb, ${cssVar.colorBgContainer} 70%, transparent);\n `,\n ring: css`\n rotate: -90deg;\n `,\n ringProgress: css`\n stroke: ${cssVar.colorPrimary};\n `,\n ringTrack: css`\n stroke: ${cssVar.colorFillTertiary};\n `,\n root: css`\n display: inline-flex;\n align-items: center;\n color: ${cssVar.colorTextSecondary};\n `,\n tip: css`\n font-size: ${cssVar.fontSizeSM};\n color: ${cssVar.colorTextSecondary};\n `,\n wrapper: css`\n position: relative;\n `,\n}));\n"],"mappings":";;AAEA,MAAM,YAAY,SAAS;;;;;;;;AAS3B,MAAM,eAAe,SAAS;;;;;;;;;;;;;AAc9B,MAAM,aAAa,SAAS;;;;;;;;;;AAW5B,MAAM,WAAW,SAAS;;;;;AAM1B,MAAM,gBAAgB;;;;;AAMtB,MAAa,SAAS,oBAAoB,EAAE,KAAK,cAAc;CAC7D,OAAO,GAAG;;;CAGV,UAAU,GAAG;;;CAGb,SAAS,GAAG;;;;CAIZ,YAAY,GAAG;;;;;;;;;CASf,aAAa,GAAG;;;;;;;;;;iBAUD,WAAW;MACtB,cAAc;;CAElB,cAAc,GAAG;;;;;;;;;;;;CAYjB,aAAa,GAAG;;;;;;;;;;iBAUD,UAAU;MACrB,cAAc;;CAElB,iBAAiB,GAAG;;;;;;;;;;;;iBAYL,aAAa;MACxB,cAAc;;CAElB,aAAa,GAAG;;;;;;;;;iBASD,SAAS;MACpB,cAAc;;CAElB,SAAS,GAAG;;;;;;;;;;aAUD,OAAO,mBAAmB;;qCAEF,OAAO,iBAAiB;;CAE3D,MAAM,GAAG;;;CAGT,cAAc,GAAG;cACL,OAAO,aAAa;;CAEhC,WAAW,GAAG;cACF,OAAO,kBAAkB;;CAErC,MAAM,GAAG;;;aAGE,OAAO,mBAAmB;;CAErC,KAAK,GAAG;iBACO,OAAO,WAAW;aACtB,OAAO,mBAAmB;;CAErC,SAAS,GAAG;;;AAGd,EAAE"}