34 lines
832 B
TypeScript
34 lines
832 B
TypeScript
'use client';
|
|
|
|
import { ThreeCircles, ThreeDots } from 'react-loader-spinner';
|
|
|
|
import { useConceptOptions } from '@/context/ConceptOptionsContext';
|
|
|
|
import AnimateFade from '../wrap/AnimateFade';
|
|
|
|
interface LoaderProps {
|
|
/** Scale of the loader from 1 to 10. */
|
|
scale?: number;
|
|
|
|
/** Show a circular loader. */
|
|
circular?: boolean;
|
|
}
|
|
|
|
/**
|
|
* Displays animated loader.
|
|
*/
|
|
function Loader({ scale = 5, circular }: LoaderProps) {
|
|
const { colors } = useConceptOptions();
|
|
return (
|
|
<AnimateFade noFadeIn className='flex justify-center'>
|
|
{circular ? (
|
|
<ThreeCircles color={colors.bgPrimary} height={scale * 20} width={scale * 20} />
|
|
) : (
|
|
<ThreeDots color={colors.bgPrimary} height={scale * 20} width={scale * 20} radius={scale * 2} />
|
|
)}
|
|
</AnimateFade>
|
|
);
|
|
}
|
|
|
|
export default Loader;
|