44 lines
1.1 KiB
JavaScript
44 lines
1.1 KiB
JavaScript
import { useNProgress } from "@tanem/react-nprogress";
|
|
import React from "react";
|
|
|
|
export default function IndefiniteLoading({ loading }) {
|
|
const { animationDuration, isFinished, progress } = useNProgress({
|
|
isAnimating: loading,
|
|
});
|
|
|
|
return (
|
|
<div
|
|
style={{
|
|
opacity: isFinished ? 0 : 1,
|
|
pointerEvents: "none",
|
|
transition: `opacity ${animationDuration}ms linear`,
|
|
}}>
|
|
<div
|
|
style={{
|
|
background: "#29d",
|
|
height: 4,
|
|
left: 0,
|
|
marginLeft: `${(-1 + progress) * 100}%`,
|
|
position: "fixed",
|
|
top: 0,
|
|
transition: `margin-left ${animationDuration}ms linear`,
|
|
width: "100%",
|
|
zIndex: 1031,
|
|
}}>
|
|
<div
|
|
style={{
|
|
boxShadow: "0 0 10px #29d, 0 0 5px #29d",
|
|
display: "block",
|
|
height: "100%",
|
|
opacity: 1,
|
|
position: "absolute",
|
|
right: 0,
|
|
transform: "rotate(3deg) translate(0px, -4px)",
|
|
width: 100,
|
|
}}
|
|
/>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|