import styled, { keyframes } from 'styled-components';
import useStore from '../../store/store';
const LoadingPage = () => {
const { loading } = useStore();
return (
<>
<LoadingContainer className={loading ? ''
: 'loaded'}>
{/* <Loader />
<div>Loading...</div> */}
<LoadingLeft className={loading ? ''
: 'loaded'} />
<LoadingRight className={loading ? ''
: 'loaded'} />
<SpinnerBox className={loading ? ''
: 'loaded'}>
<div className='configure-border-1'>
<div className='configure-core'></div>
</div>
<div className='configure-border-2'>
<div className='configure-core'></div>
</div>
<div className='loading-word'>加载中...</div>
</SpinnerBox>
</LoadingContainer>
</>
)
}
// 定义加载动画
const spin = keyframes`
0
% { transform
: rotate(0deg); }
100% { transform
: rotate(3
60deg); }
`;
// Loading 组件样式
const LoadingContainer = styled.div`
display
: flex;
flex-direction
: column;
justify-content
: center;
align-items
: center;
height: 100%;
width
: 100%;
font-size
: 24px;
z-index
: 999;
transition
: all 2s;
opacity
: 1;
position: fixed;
&.loaded {
opacity
: 0;
position: absolute;
z-index
: -
1001;
}
`;
const Loader = styled.div`
border
: 8px solid rgba(255, 255, 255, 0.3);
border-top
: 8px solid white;
border-radius
: 50
%;
width
: 60px;
height: 60px;
animation
: ${spin} 1s linear infinite;
`;
const LoadingLeft = styled.div`
position: fixed;
z-index
: 1000;
width
: 52
%;
height: 100%;
background
: #37474f;
left
: 0;
transition
: all 1s;
&.loaded {
transform
: translate(-
100%, 0);
}
`
const LoadingRight = styled.div`
position: fixed;
z-index
: 1000;
width
: 52
%;
height: 100%;
background
: #37474f;
right
: 0;
transition
: all 1s;
&.loaded {
transform
: translate(
100%, 0);
}
`
const SpinnerBox = styled.div`
position: fixed;
z-index
: 1001;
opacity
: 1;
transition
: all .3s;
&.loaded {
opacity
: 0;
}
.configure-border-1 {
position: absolute;
padding
: 3px;
width
: 115px;
height: 115px;
background
: #ffab91;
animation
: configure-clockwise 3s ease-in-out 0s infinite alternate;
.configure-core {
width
: 100%;
height: 100%;
background
: #37474f;
}
}
.configure-border-2 {
left
: -115px;
padding
: 3px;
width
: 115px;
height: 115px;
background
: #3ff9dc;
transform
: rotate(45deg);
animation
: configure-xclockwise 3s ease-in-out 0s infinite alternate;
.configure-core {
width
: 100%;
height: 100%;
background
: #37474f;
}
}
.loading-word {
position: absolute;
color
: #eff;
font-size
: 1
6px;
top
: 50
%;
left
: 50
%;
transform
: translate(-50
%, -50
%);
white-space
: nowrap;
}
`
export default LoadingPage出现这个
bug tree hydrated but some attributes of the server rendered HTML didn't match the cl
ient propert
ies. This won't be patched up. This can happen if a SSR-ed Cl
ient Component used
:
博客介绍了一种样式设置方法，将父元素设置为overflow:hidden，绝对定位的子元素设置为height:9999px，属于前端开发的样式设置内容。
扫一扫
104
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
