103 lines
2.5 KiB
TypeScript
103 lines
2.5 KiB
TypeScript
|
type Props = {
|
|||
|
|
loaderText: string; //Тип передаваемых данных loaderText - string
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
import styled, { keyframes } from 'styled-components'
|
|||
|
|
import { AnimDot } from './animDot';
|
|||
|
|
import { ModalWindow } from '../modalwindows/style';
|
|||
|
|
|
|||
|
|
|
|||
|
|
//Константа которая устанавливает кейфвреймы для вращения
|
|||
|
|
const spinAnimation = keyframes`
|
|||
|
|
from {
|
|||
|
|
transform: rotate(0deg);
|
|||
|
|
}
|
|||
|
|
to {
|
|||
|
|
transform: rotate(360deg);
|
|||
|
|
}
|
|||
|
|
`
|
|||
|
|
|
|||
|
|
//Стиль экрана загрузки
|
|||
|
|
export const LoaderContainer = styled.div`
|
|||
|
|
top: 0px;
|
|||
|
|
z-index:998;
|
|||
|
|
background-color: rgba(0,0,0, 0.7);
|
|||
|
|
position: fixed;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
overflow-y: hidden;
|
|||
|
|
`
|
|||
|
|
|
|||
|
|
|
|||
|
|
//Стиль блока с элементами загрузки
|
|||
|
|
export const Loaderblock = styled.div`
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
align-items: center;
|
|||
|
|
gap: 15px;
|
|||
|
|
|
|||
|
|
p{
|
|||
|
|
font-size: 24px;
|
|||
|
|
color: white;
|
|||
|
|
}
|
|||
|
|
`
|
|||
|
|
//Стиль для блока с кольцом загрузки
|
|||
|
|
export const LoadingSpinner = styled.div`
|
|||
|
|
position: relative;
|
|||
|
|
width: 65px;
|
|||
|
|
height: 65px;
|
|||
|
|
`
|
|||
|
|
|
|||
|
|
//Стиль для кольца загрузки
|
|||
|
|
export const LoadingRing = styled.div`
|
|||
|
|
position: absolute;
|
|||
|
|
top: 0;
|
|||
|
|
left: 0;
|
|||
|
|
width: 65px;
|
|||
|
|
height: 65px;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
border: 12px solid white;
|
|||
|
|
`
|
|||
|
|
//Стиль для части кольца загрузки, которая будет вращаться
|
|||
|
|
export const LoadingPart = styled.div`
|
|||
|
|
position: absolute;
|
|||
|
|
top: 0;
|
|||
|
|
left: 0;
|
|||
|
|
width: 65px;
|
|||
|
|
height: 65px;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
border: 12px solid transparent;
|
|||
|
|
border-top: 12px solid ${props => props.theme.accent};
|
|||
|
|
|
|||
|
|
// Добавление аниманции и использование кейфремов
|
|||
|
|
animation: ${spinAnimation} 1s linear infinite;
|
|||
|
|
`
|
|||
|
|
|
|||
|
|
const Text = styled.div`
|
|||
|
|
display: flex;
|
|||
|
|
gap: 3px;
|
|||
|
|
font-size: 24px;
|
|||
|
|
color: white;
|
|||
|
|
margin-top: 30px;
|
|||
|
|
margin-left: 25px;
|
|||
|
|
`
|
|||
|
|
|
|||
|
|
export default function RouterLoader({ loaderText }: Props) {
|
|||
|
|
return (
|
|||
|
|
<ModalWindow>
|
|||
|
|
<Loaderblock>
|
|||
|
|
<LoadingSpinner>
|
|||
|
|
<LoadingRing />
|
|||
|
|
<LoadingPart />
|
|||
|
|
</LoadingSpinner>
|
|||
|
|
|
|||
|
|
{/* Текст экрана загрузки устанавливается с помощью передаваемых данных loaderText */}
|
|||
|
|
<Text>{loaderText}<AnimDot/></Text>
|
|||
|
|
</Loaderblock>
|
|||
|
|
</ModalWindow>
|
|||
|
|
|
|||
|
|
)
|
|||
|
|
}
|