From 8f52066bce45523ac39525876811a7548f483dc4 Mon Sep 17 00:00:00 2001 From: goodmice Date: Mon, 19 Dec 2022 08:07:08 +0500 Subject: [PATCH] =?UTF-8?q?=D0=94=D0=BE=D0=B1=D0=B0=D0=B2=D0=BB=D0=B5?= =?UTF-8?q?=D0=BD=D0=B0=20=D0=B4=D0=BE=D0=BA=D1=83=D0=BC=D0=B5=D0=BD=D1=82?= =?UTF-8?q?=D0=B0=D1=86=D0=B8=D1=8F=20=D0=BA=D0=BE=D0=BC=D0=BF=D0=BE=D0=BD?= =?UTF-8?q?=D0=B5=D0=BD=D1=82=D0=B0=20LoaderPortal?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/LoaderPortal.tsx | 7 +++++++ src/styles/components/loader.css | 6 +++--- 2 files changed, 10 insertions(+), 3 deletions(-) diff --git a/src/components/LoaderPortal.tsx b/src/components/LoaderPortal.tsx index 770c37a..66bce54 100755 --- a/src/components/LoaderPortal.tsx +++ b/src/components/LoaderPortal.tsx @@ -3,12 +3,19 @@ import { HTMLAttributes } from 'react' import { Loader } from '@components/icons' type LoaderPortalProps = HTMLAttributes & { + /** Показать ли загрузку */ show?: boolean, + /** Затемнять ли дочерний блок */ fade?: boolean, + /** Параметры спиннера */ spinnerProps?: HTMLAttributes, + /** Заполнять ли контент на 100% */ fillContent?: boolean } +/** + * @description Добавляет оверлей загрузки над обёрнутым блоком + */ export const LoaderPortal: React.FC = ({ className = '', show, fade = true, children, spinnerProps, fillContent, ...other }) => (
{children}
diff --git a/src/styles/components/loader.css b/src/styles/components/loader.css index 33a233a..e0652de 100644 --- a/src/styles/components/loader.css +++ b/src/styles/components/loader.css @@ -58,9 +58,9 @@ place-self: center; align-self: center; justify-self: center; - z-index: 1; + z-index: 1; height: 80px; - width: 80px; + width: 80px; border-radius: 40px; } @@ -71,6 +71,6 @@ background-color: rgba(255, 255, 255, 0.4); align-self: stretch; justify-self: stretch; - z-index: 1; + z-index: 1; box-shadow: 0px 0px 6px 5px rgba(255, 254, 254, 0.4); }