@hhgtech/hhg-components
Version:
Hello Health Group common components
55 lines (51 loc) • 1.4 kB
JavaScript
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 };