nice-ui
Version:
React design system, components, and utilities
56 lines (55 loc) • 1.65 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.SpinnerBars = void 0;
const React = require("react");
const nano_theme_1 = require("nano-theme");
const h = React.createElement;
function r(delay) {
return {
'-webkit-animation-delay': delay,
'animation-delay': delay,
};
}
const blockClass = (0, nano_theme_1.rule)({
w: '20px',
minW: '20px',
h: '20px',
ta: 'center',
fs: '10px',
d: 'inline-block',
bxz: 'border-box',
pe: 'none',
'&>span': {
bg: nano_theme_1.lightTheme.g(0.8),
h: '100%',
w: '4px',
d: 'inline-block',
mar: '0',
an: 'spinner-bars 1.2s infinite ease-in-out',
},
'&>.r2': r('-1.1s'),
'&>.r3': r('-1.0s'),
'&>.r4': r('-0.9s'),
'&>.r5': r('-0.8s'),
'@keyframes spinner-bars': {
'0%, 40%, 100%': {
tr: 'scaleY(0.4)',
},
'20%': {
tr: 'scaleY(1.0)',
},
},
});
const SpinnerBars = ({ color }) => {
const dynamicBlockClass = (0, nano_theme_1.useRule)((theme) => ({
'&>span': {
bg: theme.g(0.8),
},
}));
const style = {};
if (color) {
style.background = typeof color === 'string' ? color : nano_theme_1.lightTheme.color.sem.blue[1];
}
return h('span', { className: blockClass + dynamicBlockClass }, h('span', { className: 'r1', style }, ' '), h('span', { className: 'r2', style }, ' '), h('span', { className: 'r3', style }, ' '), h('span', { className: 'r4', style }, ' '), h('span', { className: 'r5', style }, ' '));
};
exports.SpinnerBars = SpinnerBars;