41 lines
1.2 KiB
JavaScript
41 lines
1.2 KiB
JavaScript
import { Box, Spinner, Text, useColorMode ,useBreakpointValue} from "@chakra-ui/react";
|
|
import React from "react";
|
|
import bannerImage from "../../assets/images/bannerImg.png";
|
|
import Lottie from "lottie-react";
|
|
import rubixAnimation from "../../assets/images/rubixLoader.json";
|
|
|
|
const FullScreenLoaader = ({half}) => {
|
|
const { colorMode } = useColorMode();
|
|
const width = useBreakpointValue({ base: "65%", md: "25%" });
|
|
|
|
return (
|
|
<Box
|
|
backgroundImage={colorMode !== "light" ? !half&& `url(${bannerImage})` : "none"}
|
|
// position={"relative"}
|
|
// backgroundSize="contain"
|
|
// backgroundRepeat="no-repeat"
|
|
h={half ? "50vh":"100vh"}
|
|
// w={"100%"}
|
|
display={"flex"}
|
|
justifyContent={"center"}
|
|
alignItems={"center"}
|
|
>
|
|
{/* <Spinner
|
|
thickness="2px"
|
|
speed="0.65s"
|
|
emptyColor={colorMode === "light" ? "#fff" : "#000"}
|
|
color="purple.700"
|
|
size="lg"
|
|
/> */}
|
|
<Lottie
|
|
animationData={rubixAnimation}
|
|
loop={true} // Add any additional Lottie configurations here
|
|
// style={{ width: colorMode === "light" ? "25%" : "25%" }}
|
|
style={{ width }}
|
|
/>
|
|
</Box>
|
|
);
|
|
};
|
|
|
|
export default FullScreenLoaader;
|