@navinc/base-react-components
Version:
Nav's Pattern Library
37 lines • 1.53 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import styled, { keyframes } from 'styled-components';
const Dot = styled.div.withConfig({ displayName: "brc-sc-Dot", componentId: "brc-sc-rzpegh" }) `
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).withConfig({ displayName: "brc-sc-Dot1", componentId: "brc-sc-p04t25" }) `
animation: ${fadeIn} 1.5s ease infinite;
`;
const Dot2 = styled(Dot).withConfig({ displayName: "brc-sc-Dot2", componentId: "brc-sc-rnk4f7" }) `
animation: ${fadeIn} 1.5s ease 0.15s infinite;
`;
const Dot3 = styled(Dot).withConfig({ displayName: "brc-sc-Dot3", componentId: "brc-sc-tfpqjo" }) `
animation: ${fadeIn} 1.5s ease 0.3s infinite;
`;
const colors = {
purple: 'navPrimary',
green: 'navStatusPositive',
white: 'navNeutralLight',
};
export const Wrapper = styled.div.withConfig({ displayName: "brc-sc-Wrapper", componentId: "brc-sc-o6n7ns" }) `
display: flex;
color: ${({ dotColor, theme }) => theme[colors[dotColor]]};
& > * {
background-color: currentcolor;
}
`;
export const LoadingDots = (props) => (_jsxs(Wrapper, Object.assign({}, props, { children: [_jsx(Dot1, {}), _jsx(Dot2, {}), _jsx(Dot3, {})] })));
const StyledLoadingDots = styled(LoadingDots).withConfig({ displayName: "brc-sc-StyledLoadingDots", componentId: "brc-sc-1sfw585" }) ``;
export default StyledLoadingDots;
//# sourceMappingURL=loading-dots.js.map