front/dev

FRONT/DEV/src/components/UI/loader.tsx

@@ -0,0 +1,101 @@
+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>
+    )
+}