nice-ui/lib/2-inline-block/SpinnerCircle/index.js

React design system, components, and utilities

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.SpinnerCircle = void 0;
const react_1 = require("react");
const nano_theme_1 = require("nano-theme");
const blockClass = (0, nano_theme_1.rule)({
    d: 'inline-block',
    bdrad: '50%',
    animation: 'spinner-circle .3s infinite linear',
    w: '16px',
    h: '16px',
    bd: '1px solid rgba(0,0,0,.25)',
    bdl: '1px solid transparent',
    '@keyframes spinner-circle': {
        to: {
            transform: 'rotate(359.9deg)',
        },
    },
});
const SpinnerCircle = ({ size = 0, color }) => {
    const style = {};
    if (color) {
        const bd = Math.min(3, Math.max(1, size));
        style.border = `${bd}px solid ${color}`;
        style.borderLeft = `${bd}px solid transparent`;
    }
    if (size) {
        style.width = `${16 + size * 8}px`;
        style.height = `${16 + size * 8}px`;
    }
    return (0, react_1.createElement)('div', {
        className: blockClass,
        style,
    });
};
exports.SpinnerCircle = SpinnerCircle;