101 lines
No EOL
2.4 KiB
TypeScript
101 lines
No EOL
2.4 KiB
TypeScript
type Props = {
|
||
loaderText: string; //Тип передаваемых данных loaderText - string
|
||
}
|
||
|
||
import styled, { keyframes } from 'styled-components'
|
||
import { AnimDot } from './animDot';
|
||
|
||
|
||
//Константа которая устанавливает кейфвреймы для вращения
|
||
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 Loader({ loaderText }: Props) {
|
||
return (
|
||
|
||
<Loaderblock>
|
||
|
||
<LoadingSpinner>
|
||
<LoadingRing />
|
||
<LoadingPart />
|
||
</LoadingSpinner>
|
||
|
||
{/* Текст экрана загрузки устанавливается с помощью передаваемых данных loaderText */}
|
||
<Text>{loaderText}<AnimDot/></Text>
|
||
</Loaderblock>
|
||
)
|
||
} |