@navinc/base-react-components
Version:
Nav's Pattern Library
36 lines • 1.63 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import styled, { keyframes } from 'styled-components';
export const Dot = styled.div.withConfig({ displayName: "brc-sc-Dot", componentId: "brc-sc-zso5ad" }) `
margin: 0.25em 0.3em;
border-radius: 50%;
height: 0.5em;
width: 0.5em;
background-color: currentcolor;
`;
export const DotWrapper = styled.div.withConfig({ displayName: "brc-sc-DotWrapper", componentId: "brc-sc-1fcz8hx" }) `
display: flex;
`;
const fadeIn = keyframes `
from { opacity: 1; }
to { opacity: 0; }
`;
const Dot1 = styled(Dot).withConfig({ displayName: "brc-sc-Dot1", componentId: "brc-sc-o1gywh" }) `
animation: ${fadeIn} 1.5s ease infinite;
`;
const Dot2 = styled(Dot).withConfig({ displayName: "brc-sc-Dot2", componentId: "brc-sc-2qeahg" }) `
animation: ${fadeIn} 1.5s ease 0.15s infinite;
`;
const Dot3 = styled(Dot).withConfig({ displayName: "brc-sc-Dot3", componentId: "brc-sc-1kzzyg5" }) `
animation: ${fadeIn} 1.5s ease 0.3s infinite;
`;
const colors = {
purple: 'navPrimary',
green: 'navStatusPositive',
white: 'navNeutralLight',
};
export const Wrapper = styled(DotWrapper).withConfig({ displayName: "brc-sc-Wrapper", componentId: "brc-sc-adh9la" }) `
color: ${({ dotColor, theme }) => (dotColor ? theme[colors[dotColor]] : undefined)};
`;
const _LoadingDots = (props) => (_jsxs(Wrapper, Object.assign({}, props, { children: [_jsx(Dot1, {}), _jsx(Dot2, {}), _jsx(Dot3, {})] })));
export const LoadingDots = styled(_LoadingDots).withConfig({ displayName: "brc-sc-LoadingDots", componentId: "brc-sc-63imj8" }) ``;
//# sourceMappingURL=loading-dots.js.map