fui-fancyui
Version:
FancyUI Libary
40 lines (39 loc) • 1.43 kB
JavaScript
import { styled as i, css as a, keyframes as s } from "styled-components";
import { sizes as r } from "./sizeSettings.js";
const d = ({ $sizeC: t, theme: n, $layer: e, $themeType: o = "accent" }) => a`
border-top: ${t} solid transparent;
border-right: ${t} solid ${n.color[o][e || 0]};
border-bottom: ${t} solid transparent;
border-left: ${t} solid ${n.color[o][e || 0]};
`, c = s`
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
`, m = s`
0% { transform: rotate(360deg); }
100% { transform: rotate(0deg); }
`, f = i.div`
position: relative;
width: ${({ $sizeC: t }) => t ? r[t].width : r.md.width};
height: ${({ $sizeC: t }) => t ? r[t].width : r.md.width};
display: flex;
align-items: center;
justify-content: center;
`, h = i.div`
${({ $sizeC: t, theme: n, $themeType: e, $layer: o }) => d({ $sizeC: t ? r[t].thicknessInner : r.md.thickness, theme: n, $themeType: e, $layer: o })}
animation: ${m} 2s infinite ease-in-out;
border-radius: 50%;
width: 80%;
aspect-ratio: 1 / 1;
`, g = i.div`
${({ $sizeC: t, theme: n, $themeType: e, $layer: o }) => d({ $sizeC: t ? r[t].thickness : r.md.thickness, theme: n, $themeType: e, $layer: o })}
position: absolute;
animation: ${c} 2s infinite ease-in-out;
border-radius: 50%;
width: 100%;
aspect-ratio: 1 / 1;
`;
export {
f as SpinnerContainer,
g as StyledFancyLoadingSpinner,
h as StyledInnerSpinner
};