@navinc/base-react-components
Version:
Nav's Pattern Library
32 lines (31 loc) • 939 B
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import styled, { keyframes } from 'styled-components';
const Dot = styled.div `
margin: 0.25em 0.3em;
border-radius: 50%;
height: 0.5em;
width: 0.5em;
`;
const fadeIn = keyframes `
from { opacity: 1; }
to { opacity: 0; }
`;
const Dot1 = styled(Dot) `
animation: ${fadeIn} 1.5s ease infinite;
`;
const Dot2 = styled(Dot) `
animation: ${fadeIn} 1.5s ease 0.15s infinite;
`;
const Dot3 = styled(Dot) `
animation: ${fadeIn} 1.5s ease 0.3s infinite;
`;
export const Wrapper = styled.div `
display: flex;
& > * {
background-color: currentcolor;
}
`;
export const LoadingDots = (props) => (_jsxs(Wrapper, Object.assign({}, props, { children: [_jsx(Dot1, {}, void 0), _jsx(Dot2, {}, void 0), _jsx(Dot3, {}, void 0)] }), void 0));
const StyledLoadingDots = styled(LoadingDots) ``;
export default StyledLoadingDots;
//# sourceMappingURL=loading-dots.js.map