web/src/components/Loader.tsx
import React from "react";
import styled, { type CSSProperties, keyframes } from "styled-components";
import KlerosIcon from "svgs/icons/kleros.svg";
type Width = CSSProperties["width"];
type Height = CSSProperties["height"];
const breathing = keyframes`
0% {
transform: scale(1);
}
50% {
transform: scale(1.3);
}
100% {
transform: scale(1);
}
`;
const StyledKlerosIcon = styled(KlerosIcon)`
path {
fill: ${({ theme }) => theme.klerosUIComponentsStroke};
}
animation: ${breathing} 2s ease-out infinite normal;
`;
const Container = styled.div<{ width?: Width; height?: Height }>`
margin: auto;
width: ${({ width }) => width ?? "100%"};
height: ${({ height }) => height ?? "100%"};
`;
interface ILoader {
width?: Width;
height?: Height;
className?: string;
}
const Loader: React.FC<ILoader> = ({ width, height, className }) => {
return (
<Container {...{ width, height, className }}>
<StyledKlerosIcon />
</Container>
);
};
export default Loader;