Preloader

import { Preloader } from '@megafon/ui-core';

Примеры и код

Свойства и методы

Цветовые темы

<Preloader color="default" />
  <DemoPreloaderWrapper bgColor="var(--stcWhite)">
      <Preloader color="black" />
  </DemoPreloaderWrapper>
  <DemoPreloaderWrapper bgColor="var(--brandGreen)">
      <Preloader color="white" />
  </DemoPreloaderWrapper>

Код DemoPreloaderWrapperexport const DemoPreloaderWrapper: React.FC = ({ children }) => {
    return (
        <div style={wrapperStyles}>
            {children}
        </div>
    );
};

const wrapperStyles = {
    backgroundColor: '#00B956',
    padding: '20px',
};

Размеры

<Preloader sizeAll="small" />
  <Preloader sizeAll="medium" />

Задержка отрисовки

Задержка отрисовки отключена (по умолчанию отрисовка происходит с задержкой 250мс)

<Preloader hasDelay={false} />

Отключение анимации

Анимация загрузки отключена

 <Preloader disableAnimate />

Prop name	Type	Default	Description
delay	boolean	true	Задержка отрисовки
color	PreloaderColorsType	default	Цветовая тема
sizeAll	PreloaderSizesType	medium	Размер на всех разрешениях экрана
sizeWide	PreloaderSizesType		Размер на разрешении экрана 1280+
sizeDesktop	PreloaderSizesType		Размер на разрешении экрана 1024+
sizeTablet	PreloaderSizesType		Размер на разрешении экрана 768-1023
sizeMobile	PreloaderSizesType		Размер на разрешении экрана 0-767
disableAnimate	boolean	false	Отмена анимации
className	string		Дополнительный класс корневого элемента
dataAttrs	{ root?: Record<string, string>; }		Дополнительные data атрибуты к внутренним элементам