@furystack/shades-common-components
Version:
Common UI components for FuryStack Shades
47 lines • 2.05 kB
JavaScript
import { Shade, createComponent } from '@furystack/shades';
import { cssVariableTheme } from '../services/css-variable-theme.js';
import { ThemeProviderService } from '../services/theme-provider-service.js';
import { promisifyAnimation } from '../utils/promisify-animation.js';
export const Loader = Shade({
customElementName: 'shade-loader',
css: {
display: 'inline-block',
fontFamily: cssVariableTheme.typography.fontFamily,
transformOrigin: 'center',
opacity: '0',
},
render: ({ props, injector, useRef }) => {
const { theme } = injector.get(ThemeProviderService);
const spinnerRef = useRef('spinner');
const { delay = 500 } = props;
const { borderWidth = 15 } = props;
const { borderColor = theme.palette.primary.main } = props;
setTimeout(() => {
const spinner = spinnerRef.current;
if (!spinner)
return;
const host = spinner.parentElement;
if (host) {
void promisifyAnimation(host, [{ opacity: '0' }, { opacity: '1' }], {
duration: 500,
delay,
fill: 'forwards',
});
}
void promisifyAnimation(spinner, [{ transform: 'rotate(0deg)' }, { transform: 'rotate(180deg)' }, { transform: 'rotate(360deg)' }], {
duration: 1500,
easing: 'ease-in-out',
iterations: Infinity,
});
}, 1);
return (createComponent("div", { ref: spinnerRef, style: {
position: 'relative',
width: `calc(100% - ${borderWidth * 2}px)`,
height: `calc(100% - ${borderWidth * 2}px)`,
border: `${borderWidth}px solid ${cssVariableTheme.action.subtleBorder}`,
borderBottom: `${borderWidth}px solid ${borderColor}`,
borderRadius: cssVariableTheme.shape.borderRadius.full,
} }));
},
});
//# sourceMappingURL=loader.js.map