splash 변경
This commit is contained in:
@@ -1,27 +0,0 @@
|
||||
import { CSSProperties, useState } from 'react';
|
||||
import { FadeLoader } from 'react-spinners';
|
||||
|
||||
const override: CSSProperties = {
|
||||
position: 'fixed',
|
||||
display: 'block',
|
||||
margin: '0 auto',
|
||||
top: '50%',
|
||||
left: '50%',
|
||||
zIndex: 2000
|
||||
};
|
||||
export const RefreshingLoading = () => {
|
||||
let [loading, setLoading] = useState<boolean>(false);
|
||||
let [color, setColor] = useState<string>('#0b0606');
|
||||
|
||||
return (
|
||||
<>
|
||||
<FadeLoader
|
||||
color={color}
|
||||
loading={loading}
|
||||
cssOverride={override}
|
||||
aria-label="Loading Spinner"
|
||||
data-testid="loader"
|
||||
/>
|
||||
</>
|
||||
);
|
||||
};
|
||||
@@ -1,17 +1,25 @@
|
||||
import intro from '@/shared/ui/assets/img/lottie/intro.json';
|
||||
import { Player } from '@lottiefiles/react-lottie-player';
|
||||
import { CSSProperties, useState } from 'react';
|
||||
import { FadeLoader } from 'react-spinners';
|
||||
|
||||
const override: CSSProperties = {
|
||||
position: 'fixed',
|
||||
display: 'block',
|
||||
margin: '0 auto',
|
||||
top: '50%',
|
||||
left: '50%',
|
||||
zIndex: 2000
|
||||
};
|
||||
export const Splash = () => {
|
||||
let [loading, setLoading] = useState<boolean>(true);
|
||||
let [color, setColor] = useState<string>('#0b0606');
|
||||
|
||||
return (
|
||||
<div className="intro">
|
||||
<Player
|
||||
src={intro}
|
||||
background="transparent"
|
||||
style={{ width: '150px', height: '150px' }}
|
||||
autoplay={true}
|
||||
speed={1}
|
||||
loop
|
||||
/>
|
||||
</div>
|
||||
<FadeLoader
|
||||
color={color}
|
||||
loading={loading}
|
||||
cssOverride={override}
|
||||
aria-label="Loading Spinner"
|
||||
data-testid="loader"
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user