UNPKG

@hhgtech/hhg-components

Version:
55 lines (51 loc) 1.4 kB
import React__default from 'react'; import { B as Button } from './index-67429eb2.js'; import { u as useTranslations } from './index-09d9e570.js'; import { keyframes } from '@emotion/react'; import styled from '@emotion/styled'; import { theme } from './miscTheme.js'; const StyledLoading = styled.div ` display: flex; align-items: center; justify-content: center; padding: 1em; button { position: relative; } `; const circle = keyframes ` 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } `; styled.div ` display: flex; width: fit-content; width: -moz-fit-content; flex-direction: column; align-items: center; justify-content: center; padding: 1rem 2rem; background: white; border-radius: ${theme.borderRadius}; box-shadow: -1px 1px 2px rgba(67, 70, 74, 0.0001), -2px 2px 5px rgba(67, 86, 100, 0.123689); .loading-spinner { width: 24px; height: 24px; margin-bottom: 0.5rem; animation: ${circle} 1.2s linear infinite; } &[data-is-marrybaby='true'] { box-shadow: none; } `; const Loading = ({ className, size = 'md' }) => { const { t } = useTranslations(); return (React__default.createElement(StyledLoading, { className: className }, React__default.createElement(Button, { size: size, color: "transparent", isLoading: true }, t('loading')))); }; export { Loading as L };