@lobehub/ui/es/chat/LoadingDots/style.js

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

var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
import { createStyles } from 'antd-style';
export var useStyles = createStyles(function (_ref, _ref2) {
  var token = _ref.token,
    css = _ref.css;
  var size = _ref2.size,
    color = _ref2.color;
  var dotColor = color || token.colorPrimary;
  return {
    container: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n        display: flex;\n        flex-direction: row;\n        gap: 6px;\n        align-items: center;\n        justify-content: center;\n\n        padding: ", "px;\n      "])), token.paddingXS),
    // Default variant (fade)
    defaultDot: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n        width: ", "px;\n        height: ", "px;\n        border-radius: 50%;\n\n        background-color: ", ";\n\n        animation: fade-animation 1.2s ease-in-out infinite;\n\n        @keyframes fade-animation {\n          0%,\n          100% {\n            opacity: 0.3;\n          }\n\n          50% {\n            opacity: 1;\n          }\n        }\n      "])), size, size, dotColor),
    orbitContainer: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n        position: relative;\n        width: ", "px;\n        height: ", "px;\n      "])), size * 4, size * 4),
    orbitDot: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n        position: absolute;\n        inset-block-start: 50%;\n        inset-inline-start: 50%;\n        transform-origin: ", "px 0;\n\n        width: ", "px;\n        height: ", "px;\n        margin-block-start: -", "px;\n        margin-inline-start: -", "px;\n        border-radius: 50%;\n\n        background-color: ", ";\n\n        animation: orbit-animation 1.2s linear infinite;\n\n        @keyframes orbit-animation {\n          0% {\n            transform: rotate(0deg) translateX(", "px);\n          }\n\n          100% {\n            transform: rotate(360deg) translateX(", "px);\n          }\n        }\n      "])), size * 2, size, size, size / 2, size / 2, dotColor, size * 2, size * 2),
    // Orbit variant
    orbitWrapper: css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n        position: relative;\n\n        display: flex;\n        align-items: center;\n        justify-content: center;\n\n        width: ", "px;\n        height: ", "px;\n        padding: ", "px;\n      "])), size * 5, size * 5, token.paddingXS),
    // Pulse variant
    pulseDot: css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n        width: ", "px;\n        height: ", "px;\n        border-radius: 50%;\n\n        background-color: ", ";\n\n        animation: pulse-animation 1.2s ease-in-out infinite;\n\n        @keyframes pulse-animation {\n          0%,\n          100% {\n            transform: scale(0.8);\n            opacity: 0.3;\n          }\n\n          50% {\n            transform: scale(1.3);\n            opacity: 1;\n          }\n        }\n      "])), size, size, dotColor),
    // Typing variant
    typingDot: css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n        width: ", "px;\n        height: ", "px;\n        border-radius: 50%;\n\n        background-color: ", ";\n\n        animation: typing-animation 1.2s ease-in-out infinite;\n\n        @keyframes typing-animation {\n          0%,\n          100% {\n            transform: scale(0.6);\n            opacity: 0.2;\n          }\n\n          25% {\n            transform: scale(1);\n            opacity: 1;\n          }\n\n          50%,\n          75% {\n            transform: scale(0.6);\n            opacity: 0.2;\n          }\n        }\n      "])), size, size, dotColor),
    // Wave variant
    waveDot: css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n        width: ", "px;\n        height: ", "px;\n        border-radius: 50%;\n\n        background-color: ", ";\n\n        animation: wave-animation 1.24s ease-in-out infinite;\n\n        @keyframes wave-animation {\n          0%,\n          100% {\n            transform: translateY(0);\n          }\n\n          25% {\n            transform: translateY(-", "px);\n          }\n\n          50% {\n            transform: translateY(0);\n          }\n        }\n      "])), size, size, dotColor, size * 1.5)
  };
});