@eisgs/preloader v3.0.0

PagePreloader

  import { PagePreloader } from '@eisgs/preloader';
  import { Button } from '@eisgs/button';

  const [IsActivePagePreloaderOne, setIsActivePagePreloaderOne] = React.useState(false);
  const [IsActivePagePreloaderTwo, setIsActivePagePreloaderTwo] = React.useState(false);

  <>
    <div className='md-flex-row w700'>
      <Button onClick={() => setIsActivePagePreloaderOne(true)}>Включить PagePreloader</Button>
      <Button onClick={() => setIsActivePagePreloaderTwo(true)}>Включить PagePreloader с блокировкой скрола</Button>
    </div>
    
    {IsActivePagePreloaderOne && <PagePreloader onClick={() => setIsActivePagePreloaderOne(false)} />}
    {IsActivePagePreloaderTwo && <PagePreloader hasDisabledScroll onClick={() => setIsActivePagePreloaderTwo(false)} />}
  </>

Управление внешним видом Preloader

size позволяет управлять размером прелоадера

  <div className='md-icon-grid'>
    <Preloader size={10} />
    <Preloader size={20}/>
    <Preloader size={30}/>
    <Preloader size={40} />
    <Preloader size={50}/>
  </div>

color позволяет задавать кастомный цвет

  <div className='md-icon-grid'>
    <Preloader color='yellow' />
    <Preloader color='red'/>
    <Preloader color='mainGreen' />
    <Preloader color='grey'/>
    <Preloader color='mainBlack'/>
  </div>

isAbsolute позволяет переключать позиционирование

  import { css } from 'styled-components';

  const preloaderStyles = css`
    background-color: rgba(240, 245, 246, 0.8);
  `;

  const sampleText = (count) => 'Съешь же ещё этих мягких французских булок, да выпей чаю. '.repeat(count);

  <div style={{ display: 'flex', height: '350px', alignItems: 'flex-start' }}>
    <div style={{ position: 'relative', height: '200px' }}>
      <Preloader styles={preloaderStyles} />
      {sampleText(10)}
    </div>
    <div style={{ position: 'relative', height: '200px', marginLeft: '20px' }}>
      <Preloader isAbsolute styles={preloaderStyles} />
      {sampleText(10)}
    </div>
  </div>

text позволяет добавлять сообщение к прелоадеру

  <div style={{ display: 'flex', alignItems: 'flex-start' }}>
    <div style={{ position: 'relative', height: '200px', width: '100%' }}>
      <Preloader isAbsolute text='Идет загрузка данных' />
    </div>
    <div style={{ position: 'relative', height: '200px', width: '100%', marginLeft: '20px' }}>
      <Preloader isAbsolute text='Очень длинное описание того, что сейчас происходит' />
    </div>
  </div>