Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 | 2x 2x 2x 2x 2x 10x 10x 10x 10x 10x 10x 10x 10x 10x 10x 10x 10x 10x 2x 2x 2x 10x 10x 10x 10x 10x 10x | import * as React from "react";
import styled, { keyframes } from "styled-components";
import { LoaderProps, LoaderStyleProps } from "./Loader.types";
import { useTheme } from "../ThemeProvider/ThemeProvider";
import { getColorPalette } from "../../helpers/helpers";
import colorTokens from "../../tokens/colors.json";
const Loader: React.FunctionComponent<LoaderProps> = ({
shape = "square",
height = "2rem",
width = "2rem",
borderRadius = shape === "circle" ? "50%" : "0.5rem",
color = colorTokens.default.primary.main,
style,
className,
startTime = 0,
"data-testid": dataTestId,
...props
}) => {
const theme = useTheme().theme;
const colorPalette = getColorPalette(theme, color);
return (
<StyledLoaderProps
$width={width}
$height={height}
$shape={shape}
$colorPalette={colorPalette}
$color={color}
$borderRadius={borderRadius}
$startTime={startTime}
style={style}
className={className}
data-testid={dataTestId}
{...props}
/>
);
};
export default Loader;
const loadingAnimation = keyframes`
0% {
left: -3rem;
}
50% {
left: 100%
}
100% {
left: 100%;
}
`;
const StyledLoaderProps = styled.div<LoaderStyleProps>`
width: ${(props) => props.$width};
height: ${(props) => props.$height};
border-radius: ${(props) => props.$borderRadius};
background-color: ${(props) => props.$colorPalette[props.$color].grayScale[1]};
position: relative;
overflow: hidden;
&:after {
content: "";
display: block;
position: absolute;
animation: ${loadingAnimation} 2s infinite ${props => props.$startTime}s;
width: 3rem;
left:-3rem;
height: 100%;
background: ${(props) => `linear-gradient(90deg, transparent, ${props.$colorPalette[props.$color].grayScale[0]}, transparent)`};
}
`; |